Made by @raphamorim

imgStatus.js (Minified File: 855bytes)

Detect when images have been loaded without jQuery

Disability cache OR force refresh to test again

Status:
Loading...

Total of Images Loaded:
0

Total of Images Failed:
0

  • Hyouka
  • Steins;Gate
  • Barakamon
  • Kokoro Connect
  • Gekkan Shoujo Nozaki-kun
  • Yu Yu Hakusho
  • Medabots
  • Dragon Ball Z
  • How to get this?

    Using bower:
    $ bower install imgStatus

    Using npm:
    $ npm install imgstatus

    Or Download ImgStatus

    How to use?

    imgStatus is triggered by events. The function defined on watch method is called whenever there is a trigger.

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

    See the source code which was used in the above example

    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!';
    });