When it comes to websites performance is king. How long it takes for a page to load can mean the difference of millions of dollars for large ecommerce sites. In this lesson we'll use the IntersectionObserver to check when an image is in the viewport to defer loading the image.

document.addEventListener('DOMContentLoaded', () => {      const lazyImages = Array.from(document.querySelectorAll('img.lazy'));      if ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {          // Define the observer          let lazyImageObserver = new IntersectionObserver((entries, observer) => {              entries.forEach((entry) => {                  // logic for handling interstion                  if (entry.isIntersecting) {                      let lazyImage = entry.target                      lazyImage.src = lazyImage.dataset.src                      lazyImage.srcset = lazyImage.dataset.srcset                      lazyImage.classList.remove('lazy')                      lazyImageObserver.unobserve(lazyImage)                  }              })          })          // What to observe          lazyImages.forEach(lazyImage => {              lazyImageObserver.observe(lazyImage)          })      } else {      }  })

 

 

We can add some Margin to preload image even before we scroll to the image:

let lazyImageObserver = new IntersectionObserver((entries, observer) => {              entries.forEach((entry) => {                  // logic for handling interstion                  if (entry.isIntersecting) {                      let lazyImage = entry.target                      lazyImage.src = lazyImage.dataset.src                      lazyImage.srcset = lazyImage.dataset.srcset                      lazyImage.classList.remove('lazy')                      lazyImageObserver.unobserve(lazyImage)                  }              })          }, {             rootMargin: '50px'          })

rootMargin  Margin around the root. Can have values similar to the CSS  property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to all zeros.