Detect Image Loading Status With jQuery - imagesStatus

This is the jQuery version of the imgStatus library, which makes it easy to detect the image loading status and provide callback functions when the images are completely loaded.

How to use it:

1. Import the imagesStatus.js along with the latest jQuery JavaScript library (slim build) into the document.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="imagesStatus.js"></script>

2. Call the function on the target container where you want to track the image loading status.

<div class="container">
  <img src="https://picsum.photos/200/300/?random">
  <img src="https://picsum.photos/200/300/?random">
  <img src="https://picsum.photos/200/300/?random">
  <img src="https://picsum.photos/200/300/?random">
  <img src="https://picsum.photos/200/300/?random">
  ...
</div>

$(".container").imagesStatus();

3. Trigger a callback function when the image is loaded.

$(".container").imagesStatus({
  imgLoaded: function(img){
    // do something
  },
});

4. Trigger a callback function when an image is failed to load.

$(".container").imagesStatus({
  imgFailed: function(img){
    console.log(this.status.failed);
    console.log("-------failed---------------");
    console.log(img);
    console.log("-----------------------------");
  },
});

5. Trigger a callback function when all the image are completely loaded.

$(".container").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 scratchoo. For more Advanced Usages, please check the demo page or visit the official website.