Implementation Principles and Optimization Solutions for Image Lazy Loading

Implementation Principles and Optimization Solutions for Image Lazy Loading

Image lazy loading is a technique for optimizing webpage loading performance. Its core idea is to delay loading images outside the current viewport, loading them only when they are about to enter the user's field of view. This can significantly reduce the number of network requests and bandwidth consumption during the initial page load, improving page loading speed and user experience.

Detailed Implementation Principles

The basic principle of lazy loading is to determine whether to load an image by checking if it has entered the visible area. Traditional implementations rely mainly on the following three key points:

  1. Store the Real URL in a Data Attribute: Instead of directly setting the image URL in the src attribute of the img tag, use data-src (or another custom data attribute like data-srcset) to store it. This prevents the browser from immediately initiating an image request when parsing the HTML.

    <!-- Initial state: src uses a placeholder or is empty, real URL is stored in data-src -->
<img data-src="real-image.jpg" src="placeholder.jpg" alt="Example Image">

  2. Listen to Scroll Events with Throttling: Monitor the window's scroll event to determine if an image has entered the visible area. Since scroll events fire frequently, performing complex calculations directly can cause performance issues. Therefore, throttling must be used to limit the execution frequency of the handler function (e.g., at most once every 100ms).

  3. Calculate Element Position to Determine Visibility: In the scroll handler function, iterate through all images that need lazy loading, calculate the position of each image, and determine if it has entered or is about to enter the viewport. The traditional method is to compare the image's getBoundingClientRect() with the viewport size.

Traditional Implementation Steps (Step-by-Step)

  1. HTML Preparation:

    <img data-src="path/to/image1.jpg" src="placeholder.jpg" class="lazy" alt="...">
<img data-src="path/to/image2.jpg" src="placeholder.jpg" class="lazy" alt="...">

  2. JavaScript Implementation Logic:
    a. Get All Lazy Image Elements:
    javascript const lazyImages = document.querySelectorAll('img.lazy');

    b. Define a Function to Check if an Image is in the Viewport:
    javascript function isInViewport(img) { const rect = img.getBoundingClientRect(); // Condition: Check if the top of the image is above the bottom of the viewport AND the bottom of the image is below the top of the viewport // Add a buffer zone (e.g., 100px) for pre-loading to improve user experience return rect.top <= window.innerHeight + 100 && rect.bottom >= -100; }

    c. Define the Lazy Load Handler Function (with Throttling Applied):
    ```javascript
    function lazyLoad() {
    lazyImages.forEach(img => {
    if (img.dataset.src && isInViewport(img)) {
    // Image is in the viewport, start loading
    img.src = img.dataset.src; // Assign the value of data-src to src
    img.classList.remove('lazy'); // Remove the lazy class to avoid duplicate processing
    // Optional: Clear the data-src attribute after successful load
    img.onload = () => img.removeAttribute('data-src');
    }
    });
    }

    // Wrap lazyLoad with a throttle function
function throttle(func, wait) {
  let timeout = null;
  return function() {
    if (!timeout) {
      timeout = setTimeout(() => {
        func();
        timeout = null;
      }, wait);
    }
  };
}
const throttledLazyLoad = throttle(lazyLoad, 100);
```

    d. Bind Event Listeners and Initial Load:
    javascript // Listen to the scroll event (using the throttled function) window.addEventListener('scroll', throttledLazyLoad); // Listen to window resize (viewport changes may cause images to enter the view) window.addEventListener('resize', throttledLazyLoad); // On initial page load, check immediately to load above-the-fold images document.addEventListener('DOMContentLoaded', lazyLoad);

Optimization Solutions

  1. Use the Intersection Observer API (Modern, Recommended):
    This is a native browser API specifically designed for asynchronously observing the intersection state of a target element with its ancestor element or the viewport. It offers better performance than scroll-based solutions, eliminating the need for manual calculations and throttling.

    const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) { // Element entered the viewport
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img); // Stop observing the loaded image
    }
  });
}, {
  rootMargin: '100px' // Set root margin for pre-loading
});

// Observe all lazy-loaded images
lazyImages.forEach(img => observer.observe(img));

  2. Image Loading Optimization:

    • Use Appropriate Placeholder Images: Use tiny Base64 inline images, solid color blocks, or low-quality image placeholders (LQIP) to reduce unnecessary requests.
    • Responsive Images: Combine srcset and sizes attributes to allow the browser to choose the most appropriate image resource based on screen size. 
      <img data-srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1024w"
     data-sizes="(max-width: 320px) 280px, (max-width: 640px) 600px, 1024px"
     src="placeholder.jpg"
     class="lazy"
     alt="...">
      When loading, assign the values of data-srcset and data-sizes to the corresponding attributes.

  3. Loading State and Error Handling:

    • Add loading and error state indicators to enhance user experience.
    • Listen to the error event of the img element to retry loading or display an error placeholder image upon failure.

  4. Priority Hints: For certain critical images (e.g., those just below the fold), use <link rel="preload"> or the Fetch Priority API to hint to the browser to load them earlier, balancing lazy loading with the critical rendering path.

Summary
Image lazy loading significantly improves page performance through "on-demand loading." From traditional implementations based on scroll events with throttling to modern solutions using the Intersection Observer API, the performance and ease of use of these solutions have continually improved. In real-world projects, choose the appropriate implementation method based on specific requirements (such as browser compatibility) and complement it with optimizations like placeholders, responsive images, and error handling to achieve the best results.