Detecting Images Have Been Loaded with Pure JavaScript – imgStatus

Category: Image , Javascript , Loading , Recommended | November 28, 2015
Views Total:642 views
Official Page:Go to website
Last Update:November 28, 2015


Detecting Images Have Been Loaded with Pure JavaScript – imgStatus


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:'.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');'.image', function(imgs) {
    imagesLoaded.innerHTML = imgs.loaded;
    imagesFailed.innerHTML = imgs.failed;
    if (imgs.done())
        imagesStatus.innerHTML = 'Completed!';

You Might Be Interested In:

Leave a Reply