Image Preloader With Loaded Callback – ImagePreloader

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

Preview:

Image Preloader With Loaded Callback – ImagePreloader

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]);
}

You Might Be Interested In:


Leave a Reply