Detect If Images Have Been Completely Loaded - jQuery imageReady

Just another 'image is loaded' jQuery plugin that detects the loading events and triggers callbacks if specific images are completely loaded or failed to load. Supports both img tag and CSS background image property.

How to use it:

1. Include the latest jQuery (slim build) and the jQuery imageReady plugin on the html page.

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

2. Call the function on the target container where you want to detect the image loading events, and perform you own functions when the images are loaded or failed to load.

$("body").imageready(function($notLoadedImages) {

  if ($notLoadedImages && $notLoadedImages.length > 0) {
    console.log("Some images haven't loaded");
  } else {
    console.log("All images and background images have loaded");
  }
  
}

3. You can also set a timeout to perform callbacks on slow / missing image loading.

$("body").imageready(function($notLoadedImages) {

  if ($notLoadedImages && $notLoadedImages.length > 0) {
    console.log("Some images haven't loaded");
  } else {
    console.log("All images and background images have loaded");
  }
  
}, {
  allowTimeout: true,
  timeoutDuration: 2000
});

---

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