Function runs callback when all the images in the document fully loaded

onAllImagesLoaded.js

/**
 * @returns Image[]
 */
function getIncompleteImages() {
  return Array.from( document.querySelectorAll( "img" ) )
    .filter( img => !img.complete || img.naturalWidth === 0 );
}
/**
 * Execute the given callback when all the images in the document loaded
 * We call this function when markup with images is rendered but images are still loading
 * @param {Function} cb
 */
export default function( cb ) {
  let imagesLoaded = 0;
  const images = getIncompleteImages(),
        imagesCount = images.length,
        onLoad = () => {
          imagesLoaded++;
          if ( imagesLoaded >= imagesCount ) {
            return cb();
          }
        };

  if ( !imagesCount ) {
    return cb();
  }
  images.forEach( img => {
    img.addEventListener( "load", onLoad );
    img.addEventListener( "error", onLoad );
  });
}