How to Check if All Images are loaded with JavaScript

There are several reasons why you might want to detect if images have finished loading on a webpage. For example, if your page relies on images to display content, it’s important to ensure that the images are loaded before the content is displayed. Or you may want to trigger certain actions on your webpage after all the images have finished loading.

However, detecting when images have finished loading using JavaScript can be somewhat challenging, especially if the images are using lazy loading.

Problem with using Load Event

Normally, to detect when a webpage has finished loading (including all images), you can use the window.onload event. This event is triggered when the entire page, including all assets such as images and stylesheets, has finished loading.

window.onload = function() {
  console.log('Page has finished loading');
}

To specifically detect if all images on a webpage have been loaded, you can use the window.Image constructor to create an image object for each image on the page, and then set the src attribute of the image object to the URL of the image. Then, you can use the window.Image object’s onload event to detect when each image has finished loading.

function checkImagesLoaded() {
  // Get all the images on the page
  var images = document.querySelectorAll('img');

  for (var i = 0; i < images.length; i++) {
    var img = new window.Image();
    img.src = images[i].src;
    img.onload = function() {
      imagesLoaded++;
    }
  }
  if (imagesLoaded == images.length) {
    // If all the images have finished loading, do something
    console.log('All images have finished loading');
  }
}

However, if the images on the webpage are using lazy loading, the method described above will not work as expected. This is because the window.Image constructor and the onload event are only triggered when the src attribute of an image is set, and lazy-loaded images do not have their src attribute set until they are scrolled into view.

Working with Lazy Loading Images

To detect when lazy-loaded images have finished loading, you will need to use a different approach. One option is to use the IntersectionObserver API, which allows you to detect when an element becomes visible in the viewport. You can use the IntersectionObserver to monitor the lazy-loaded images and detect when they become visible, at which point you can increment a counter to track the number of images that have finished loading.

This method is suitable for detecting when both non-lazy-loaded and lazy-loaded images have finished loading.

var observer = new IntersectionObserver(function(entries) {

  entries.forEach(function(entry) {
    // If the image has become visible in the viewport
    if (entry.isIntersecting) {
      imagesLoaded++;

      // Unobserve the image
      observer.unobserve(entry.target);
    }
  });

  // Check if the number of images that have finished loading is equal to the total number of images
  if (imagesLoaded == images.length) {
    console.log('All images have finished loading');
  }
});

// Get all the lazy-loaded images on the page
var images = document.querySelectorAll('img[data-src]');

// Loop through the images and observe them
images.forEach(function(image) {
  observer.observe(image);
});

That’s all for this tutorial. If you like it, check out our YouTube channel and our Facebook page to stay tune for more dev tips and tutorials