How to Fast Website Lazy loading ?

SEO Help and Tips

How to Fast Website Lazy loading ?

JavaScript code snippet that implements lazy loading for images using the Intersection Observer API. Lazy loading is a technique used to defer the loading of non-essential resources, such as images, until they are needed, which can significantly improve page loading performance, especially for pages with a large number of images.

Here's how the code works:

The code starts by selecting all the elements with the class "lazy-image" using the document.querySelectorAll method and stores them in the lazyImages variable. These elements are likely to be images with the actual image source specified in a custom attribute called "data-src" instead of the standard "src" attribute. This is a common practice for lazy loading images.

The lazyLoad function is defined to be used as the callback function for the IntersectionObserver. The IntersectionObserver API allows developers to asynchronously observe changes in the intersection of a target element with an ancestor element or the document's viewport. The lazyLoad function will be called whenever the observed elements intersect with the viewport.

Inside the lazyLoad function, the entries parameter represents an array of IntersectionObserverEntry objects, which contain information about the observed elements' intersection with the viewport.

The code uses the forEach method to iterate through each entry in the entries array.

For each entry, it checks whether the observed element (entry.target) is intersecting with the viewport by checking the entry.isIntersecting property. If it is intersecting, it means the element is now visible on the screen.

If the element is visible (isIntersecting is true), it gets the value of the "data-src" attribute and sets it as the "src" attribute of the image. This action effectively loads the image at that moment.

The class "lazy-image" is removed from the element to prevent it from being lazily loaded again when the intersection occurs in the future. This ensures that images are loaded only once.

Finally, the observer.unobserve(img) method is called to stop observing the image element once it has been loaded and its source has been set.

Outside the lazyLoad function, an IntersectionObserver is created using the new IntersectionObserver(lazyLoad) constructor, passing the lazyLoad function as the callback.

For each element with the "lazy-image" class (previously selected in the lazyImages variable), the observer's observe method is called to start observing each image element for intersection events.

When the images with the "lazy-image" class come into view within the browser viewport, the IntersectionObserver triggers the lazyLoad function. This function loads the actual image by setting the "src" attribute from the "data-src" attribute, and then the "lazy-image" class is removed to avoid reloading it. This whole process is controlled by the IntersectionObserver to optimize performance by loading images only when necessary.

Here is example Code:

<script type='text/javascript'>

  //<![CDATA[

const lazyImages = document.querySelectorAll('.lazy-image');

const lazyLoad = (entries, observer) => {

  entries.forEach((entry) => {

    if (entry.isIntersecting) {

      const img = entry.target;

      img.src = img.dataset.src;

      img.classList.remove('lazy-image');

      observer.unobserve(img);

    }

  });

};

const observer = new IntersectionObserver(lazyLoad);

lazyImages.forEach((img) => {

  observer.observe(img);

});

  //]]>

</script>