Detect when a list of images are loaded

Question

I'm using Semantic Ui and jQuery to make an album. I want to write a function that gets called when all images in div class="images" are loaded.

There is a loading cover div class="dimmer" which covers all images. When all images are loaded, the cover should be removed.

How can I determine when all images have been loaded so I can remove the cover?

Here is the code I have so far:

<div id="loader1" class="ui active dimmer">
    <div class="ui text loader">Loading...</div>
</div>
<div id="image1" class="ui small images">
    <img src="pics/pic_suzhou/sz1.jpg">
    <img src="pics/pic_suzhou/sz2.jpg">
    <img src="pics/pic_suzhou/sz3.jpg">
    <img src="pics/pic_suzhou/sz4.jpg">
    <img src="pics/pic_suzhou/sz5.jpg">
    <img src="pics/pic_suzhou/sz6.JPG">
    <img src="pics/pic_suzhou/sz7.JPG">
    <img src="pics/pic_suzhou/sz8.JPG">
</div>

Thanks!

Answer 1

$img.on('load', triggerAction);

function triggerAction() {
   //identify the div and put 
   .style.display = "none";
}

Answer 2

You hide the cover on the window load event, which fires after all images are loaded.

$(window).on('load', function(e){
   $('.cover').hide();
});

Answer 3

EDITED! I found that it won't work the way I offered, so I've made a complete edit, proposing the way it will work. The best way I see is using Promises. This will guarantee that even the even is missed because the handler is attached after the event is fired, we will be able to get its result as success of failure. The other ways may fail because of the cached images and/or async handling. That's why Promises are made for.

Check it out running the snippet below:

$(function(){

  function load(img) {
    return new Promise(function(resolve, reject) {
      img.onload = function() {
          console.log(img);
          resolve('OK');
      };
      img.onerror = function() {
        reject(Error("Loading error"));
      };
    });
  }

  var all = $.map($('#image1 img').get(), function(item) { return load(item); });
  Promise.all(all).then(function() {
    console.log('All loaded');
  }, function() {
    console.log('One or more failed');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image1">
  <img src="https://shop.r10s.jp/book/cabinet/5963/4988064935963.jpg?v=30">
  <img src="https://images-na.ssl-images-amazon.com/images/I/816L51ge55L._SL1202_.jpg?v=30">
  <img src="https://img-shop.mu-mo.net/img/pc_sp/aaa2018_m2th4i/header01.jpg?v=30">
  <img src="https://img-shop.mu-mo.net/img/pc_sp/aaa2018_m2th4i/header01.jpg?v=30">
</div>

Answer 4

You don't need jQuery. Modern Javascript provides idiomatic ways to deal with this functionality that are better alternatives to common jQuery functionality.

Important: at the moment there is no 100% reliable way of detecting when images in the HTML have finished loading.

Because of this, the most reliable way would be to dynamically create the image elements, and use the 'load' event. You can also fall-back to the 'load' event on the 'document' which will fire when all resources on the page are loaded.

For example, the following code removes your dimmer div when all images have been loaded, and also has a fallback on window.onload to remove the dimmer which gets triggered even if there are any errors:

const loader = document.getElementById('loader1');
const container = document.getElementById('image1');
const imageURLs = [
  "https://lorempixel.com/48/48/abstract/1/",
  "https://lorempixel.com/48/48/abstract/2/",
  "https://lorempixel.com/48/48/abstract/3/",
  "https://lorempixel.com/48/48/abstract/4/",
  "https://lorempixel.com/48/48/abstract/5/",
  "https://lorempixel.com/48/48/abstract/6/",
  "https://lorempixel.com/48/48/abstract/7/",
  "https://lorempixel.com/48/48/abstract/8/",
];

// Fallback handler that will run when everything has loaded.
window.addEventListener('load', onDocumentLoaded);

// Create images from list of sources
const images = imageURLs.map(src => {
  const image = new Image();

  // Return a promise for the loaded image.
  return new Promise((resolve, reject) => {
    // resolve when loaded
    image.addEventListener('load', () => {
      console.log(`image loaded ${src}`);
      resolve();
    });
    // reject on error
    image.addEventListener('error', (err) => {
      console.log(`error loading ${src}`);
      reject(err);
    });
    
    // Once the handlers are set, set the src and add the images to the DOM.
    image.src = src;
    container.appendChild(image);
  });
});

// Act once all promises are resolved:
Promise.all(images)
  .then(onAllImagesLoaded)
  .catch(e => {
    console.log('something went wrong.');
  });

// All images have been loaded -- success case.
function onAllImagesLoaded() {
  console.log('all images loaded');
  loader.remove();
}

// Everything finished loading -- fallback and error cases.
function onDocumentLoaded() {
  console.log('all content loaded');
  loader.remove();
}

<html>

<head></head>

<body>
  <div id="loader1" class="ui active dimmer">
    <div class="ui text loader">Loading...</div>
  </div>
  <div id="image1" class="ui small images">
  </div>
</body>

</html>