JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<img src="//placehold.it/300" />
<img src="//placehold.it/300" />
<img src="//placehold.it/300" />
<img src="//placehold.it/300" />
<img src="//placehold.it/300" />

Babel + JSX

document.addEventListener('imagesloaded', (ev) => {
  alert(`All ${ev.detail.count} images have been loaded`);
});

(function imagesLoaded() {
  const images = document.querySelectorAll('img');
  let incompleteImages = images.length;

  for (let i = images.length - 1; i > -1; --i) {
    images[i].onload = () => {
      if (--incompleteImages === 0) {
        const imagesloaded = new CustomEvent('imagesloaded', {
          detail: {
            count: images.length
          }
        });

        document.dispatchEvent(imagesloaded);
      }
    };
  }
})();