How to wait for all images to load in JavaScript

Today, we’ll show you how to wait for all images to load in JavaScript. This may needed when you want to execute code only after all images have been loaded using JavaScript.

Here, we will use the event listener to wait until all images are loaded.

• JavaScript Window Navigator Object
• How to show and hide Password using jQuery
• How to add days to a date in JavaScript
• A list of commonly used commands for Git Branches
• 5 Awesome JavaScript String Tips

<script>
  var imgList = document.images;
  var len = imgList.length;
  var imgCounter = 0;

  [].forEach.call(imgList, function (img) {
    if (img.complete) {
      incrementImgCounter();
    }
    else {
      img.addEventListener('load', incrementImgCounter, false);
    }
  });

  function incrementImgCounter() {
    imgCounter++;
    if (imgCounter === len) {
      console.log('All images loaded!');
    }
  }
</script>

How it works

• Load all the images in a variable from the document. (You can also use the querySelector to get the list of the images from the particular div)
• Loop through these images.
• Add a listener for the load event on each of these images to run the incrementImgCounter function.
• The incrementImgCounter will increment the counter
• If the counter has reached the length of images, that means they’re all loaded

Note: You can also handle the error event listener for broken images.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!!