How to implement lazy loading of responsive images using CSS properties

How to implement responsive image lazy loading using CSS properties

In web development, we often encounter situations where a large number of images need to be loaded, especially on mobile devices. . In order to improve page loading speed and user experience, lazy loading of images has become a common optimization method.

Lazy loading means that when the page is loaded, only the images in the visible area are loaded instead of loading all the images on the entire page. This greatly reduces the time required for initial loading and avoids unnecessary waste of bandwidth.

In this article, we will introduce how to use CSS properties to achieve responsive image lazy loading, which can be applied to various screen sizes and devices.

First, we need to define the images that need to be lazy loaded in HTML. Here we use the <img class="lazy-image lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="How to implement lazy loading of responsive images using CSS properties" > element and set a custom attribute data-src to store the actual URL of the image.

<img class="lazy-image lazy" src="/static/imghw/default1.png" data-src="image.jpg" data- alt="Image">

Next, we need to write CSS styles to hide the initial image and set the background image of the image by using the background-size property.

.lazy-image {
  background-image: url(placeholder.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

In the above code, placeholder.jpg is a placeholder image that is used to display until the actual image is loaded.

Then, we use the CSS properties @media to define different styles for different screen sizes.

/* 对于大屏幕设备，立即加载图像 */
@media screen and (min-width: 1024px) {
  .lazy-image {
    background-image: none;
  }
}

/* 对于小屏幕设备，延迟加载图像 */
@media screen and (max-width: 1023px) {
  .lazy-image {
    visibility: hidden;
  }
  
  .lazy-image[data-src] {
    visibility: visible;
  }
}

In the above code, we use the @media directive to divide the screen width into two ranges: greater than or equal to 1024px and less than 1024px. For large screen devices, we load the image immediately, setting background-image to none. For small screen devices, we set the visibility attribute of .lazy-image to hidden, and also set the data-src attribute The .lazy-image element sets the visibility attribute to visible, so that lazy loading of images can be achieved.

Finally, we need to use JavaScript to actually load the image.

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll(".lazy-image");

  const lazyLoad = function() {
    lazyImages.forEach(function(img) {
      if (img.getBoundingClientRect().top <= window.innerHeight && img.hasAttribute("data-src")) {
        img.setAttribute("src", img.getAttribute("data-src"));
        img.removeAttribute("data-src");
      }
    });
  };

  window.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

In the above code, we use document.querySelectorAll to get all elements with the .lazy-image class and define a lazyLoad Function to determine whether the image is within the visible area, and if so, load the image.

Finally, we bind the lazyLoad function to the browser scroll, window size change, and screen orientation change events so that the loading function is triggered when the page scrolls or changes size.

The above is the method and corresponding code example of using CSS properties to implement responsive image lazy loading. Through this method, we can optimize web page loading speed, improve user experience, and avoid unnecessary waste of bandwidth.

The above is the detailed content of How to implement lazy loading of responsive images using CSS properties. For more information, please follow other related articles on the PHP Chinese website!