Image Preloader With Loaded Callback – ImagePreloader

Category: Image , Loading | January 21, 2019
Views Total:1,223 views
Official Page:Go to website
Last Update:January 21, 2019


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