LazyLoadImages

lazyLoader.js

 const lazyLoad = () => () => {
      // create an array from <img /> tags with a .lazy class
      const lazyImages = Array.from(document.querySelectorAll('img.lazy'))
      if ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
          let lazyImageObserver = new IntersectionObserver((entries, observer) => {
              entries.forEach((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(lazyImage => {
              lazyImageObserver.observe(lazyImage)
          })
      } else {
        //have a defaulf placeholder
      }
}
 document.addEventListener('DOMContentLoaded', lazyLoad)