jQuery Plugin To Deal With Image Loading Status - imagesStatus

Just another jQuery image loading detection plugin that gives you the possibility to check whether an image successful or failed to load.  Also works with Vanilla JavaScript as seen below.

How to use it:

1. Load the JavaScript file imagesStatus.js with or without jQuery library in your html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="imagesStatus.js"></script>

2. Detect whether an image has been loaded.

// Vanilla JavaScript
imagesStatus('body', {

  imgLoaded: function(img){
    // do something
  }

 });

// jQuery
$("body").imagesStatus({

  imgLoaded: function(img){
    // do something
  }

});

3. Detect when an image is broken (failed to load).

// Vanilla JavaScript
imagesStatus('body', {

  imgFailed: function(img){
    // do something
  }

 });

// jQuery
$("body").imagesStatus({

  imgFailed: function(img){
    // do something
  }

});

4. Detect if all the images have been loaded (or failed to load).

// Vanilla JavaScript
imagesStatus('body', {

  allImgFinished: function(container){
    console.log("all images loaded");
    console.log(this.status.loaded + " images loaded, " + this.status.failed + " images failed!");
  }

 });

// jQuery
$("body").imagesStatus({

  allImgFinished: function(container){
    console.log("all images loaded");
    console.log(this.status.loaded + " images loaded, " + this.status.failed + " images failed!");
  }

});

---

This awesome jQuery plugin is developed by medBouzid. For more Advanced Usages, please check the demo page or visit the official website.