+1 vote
in CSS by
What is progressive rendering? How do you implement progressive rendering in the website?. What are the advantages of it?

1 Answer

0 votes
by

Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.

We can implement the progressive rendering of the page by loading the lazy loading of the images.  We can use Intersection Observer API to lazy load the image. The API makes it simple to detect when an element enters the viewport and take an action when it does. Once the image enters the viewport, we will start loading the images.

A sample snippet is given below.

<img class="lazy"

src="placeholder-image.jpg"

data-src="image-to-lazy-load-1x.jpg"

data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x"

alt="I'm an image!">

document.addEventListener("DOMContentLoaded", function() {

  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {

    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);

    });

  } else {

    // Possibly fall back to event handlers here

  }

});

Related questions

+1 vote
asked Jul 7, 2021 in CSS by rajeshsharma
+2 votes
asked May 9, 2020 by SakshiSharma
...