How do you implement a "lazy loading" feature for images using jQuery?

Question

Aryan Kumar · Answer

"Lazy loading" is a technique used to improve the performance of a webpage by loading images only when they are needed, i.e., when they are in the viewport. This technique can significantly reduce the page load time, especially for webpages that have a large number of images.

To implement lazy loading for images using jQuery, you can follow these steps:
Add a placeholder image for each image you want to lazy load. The placeholder image should have the same dimensions as the image you want to load.
Add a data attribute to each image element with the URL of the image you want to load.

<img src="placeholder.png" data-src="image.jpg">

Use jQuery to detect when the user has scrolled to the bottom of the page. When the user reaches the bottom of the page, load the images that are in the viewport.

$(window).on('scroll', function() {
 // Get the viewport dimensions and scroll position
 var windowHeight = $(window).height();
 var scrollTop = $(window).scrollTop();
 // Loop through each image element and check if it is in the viewport
 $('img').each(function() {
   var img = $(this);
   var imgTop = img.offset().top;
   var imgHeight = img.height();
   // Load the image if it is in the viewport
   if (imgTop < scrollTop + windowHeight && imgTop + imgHeight > scrollTop) {
     img.attr('src', img.data('src'));
   }
 });
});

In this example, we're attaching a scroll event listener to the window object. Inside the event listener, we're getting the viewport dimensions and scroll position using the height() and scrollTop() methods.

We're then looping through each img element on the page and checking if it is in the viewport. If an img element is in the viewport, we're setting its src attribute to the URL specified in its data-src attribute.

By using the data-src attribute to store the image URL, we can prevent the browser from loading all the images on the page at once. Instead, we're only loading the images that are in the viewport, which can significantly reduce the page load time and improve the user experience.

forum

How do you implement a "lazy loading" feature for images using jQuery?

Can you answer this question?

1 Answers