Image Preloader With Loaded Callback – ImagePreloader

Category: Image , Loading | January 21, 2019
Author: anthonyhastings
Views Total: 754 views
Official Page: Go to website
Last Update: January 21, 2019
License: MIT


Image Preloader With Loaded Callback – ImagePreloader


A lightweight image preloader written in pure JS that will trigger a callback function when all the provided images are completely loaded.

How it works:

Creates an image element in memory, binds a load listener to it that will run a callback function passed through during initialize, and then triggers the loading of the image by applying the src.

How to use it:

Download and place the JavaScript file image-preloader.js at the end of the document.

<script src="image-preloader.js"></script>

Preload a single image.

new ImagePreloader('image.jpg', function() {

Preload a set of images.

var imagesToPreload = document.querySelectorAll('#imgContainer > .image');
for (var i = 0, length = imagesToPreload.length; i < length; i++) {

You Might Be Interested In:

Leave a Reply