Image Preloader With Loaded Callback – ImagePreloader

Preview:

Description:

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() {
    console.log('Loaded');
});

Preload a set of images.

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