lazy-load.js

/**
 * Manage lazy load for entire site
 * @link https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video
 */
document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));
  let lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
  let lazyIframes = [].slice.call(document.querySelectorAll('iframe[data-src]'));

  if ("IntersectionObserver" in window) {
    
    // Lazy load <img> tag
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });

    // Lazy load background images
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let element = entry.target;
          let image_url = element.dataset.src;
          if ( image_url != null && image_url != '' ){
            element.style.backgroundImage = `url(${image_url})`;
          }

          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });

    // Lazy load iframes
    let lazyIframeObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyIframe = entry.target;
          lazyIframe.src = lazyIframe.dataset.src;
          lazyIframeObserver.unobserve(lazyIframe);
        }
      });
    });

    lazyIframes.forEach(function(lazyIframe) {
      lazyIframeObserver.observe(lazyIframe);
    });
  }
});