Detecting Images Have Been Loaded with Pure JavaScript – imgStatus

Preview:

Description:

imgStatus is a standalone JavaScript library that watches image loading events and allows you to do something when images have been completely loaded.

How to use it:

Load the imgStatus JavaScript library in the document when needed.

<script src="imgStatus.min.js"></script>

Call the watch method like this:

imgStatus.watch('.image', function(imgs){
    console.log(imgs.loaded); // Number of Images Loaded (Type: integer)
    console.log(imgs.failed); // Number of Images Failed (Type: integer)
    console.log(imgs.done()); // If already load OR fail every image (Type: boolean)
});

Advanced usage.

var imagesLoaded = document.querySelector('.images-loaded'),
    imagesFailed = document.querySelector('.images-failed'),
    imagesStatus = document.querySelector('.images-status');

imgStatus.watch('.image', function(imgs) {
    imagesLoaded.innerHTML = imgs.loaded;
    imagesFailed.innerHTML = imgs.failed;
    if (imgs.done())
        imagesStatus.innerHTML = 'Completed!';
});