HTML, CSS, and jQuery: Tips for lazy loading of images

HTML, CSS and jQuery: Tips for implementing lazy loading of images

In modern websites, lazy loading of images is a common optimization technique that can improve the website Loading performance and reduce server load. By lazily loading images, you can save bandwidth and speed up page loading by loading images only when the user scrolls to the visible area. This article will introduce how to use HTML, CSS and jQuery to implement lazy loading of images, and provide specific code examples.

1. HTML structure
First, in HTML we need to add a placeholder for each image that needs to be lazy loaded. This placeholder can be an ordinary div element, set using CSS styles. width and height to keep the page layout stable.

<div class="image-container">
  <div class="placeholder"></div>
  <img data-src="image.jpg" alt="Image">
</div>

In the above code, image-container represents the container of the image, and placeholder is a placeholder that will be displayed before the image is loaded. The data-src attribute of the img tag stores the real address of the image, while the alt attribute provides alternative text for the image.

2. CSS Styles
Next, we need to set some CSS styles for placeholders and images.

.image-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 设置高度占比 */
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3; /* 设置占位符背景颜色 */
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 等比例缩放填充容器 */
  opacity: 0; /* 图像透明度为0，初始状态不显示 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}

In the above code, .image-container uses relative positioning, sets the width to 100%, the height to 0, and passes the padding-bottom attribute A height ratio is set and can be adjusted according to specific needs. .placeholder Sets absolute positioning, fills the entire container, and sets the background color. imgSet absolute positioning, place the image to the upper left corner of the container, set the width and height to 100% and use object-fit to maintain the proportion of the image, with transparency in the initial state is 0 and a transition effect is added.

3. jQuery lazy loading
Finally, we use jQuery to implement lazy loading of images. After the page is loaded, when the user scrolls to the visible area, assign the data-src attribute value of the image to the src attribute, and change the transparency to 1 to realize the image's show.

$(window).on('scroll', function () {
  $('.image-container').each(function () {
    if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
      var $img = $(this).find('img');
      $img.attr('src', $img.data('src'));
      $img.css('opacity', 1);
    }
  });
});

In the above code, when the user scrolls the page, use offset().top to get the top position of each image container, which is the same as scrollTop() and height()Compare to determine whether it has been scrolled to the visible area. If so, assign the image's data-src attribute value to the src attribute and change the transparency to 1.

So far, we have completed the entire implementation of image lazy loading. Before using these techniques, remember to include the jQuery library and the above code so that it runs correctly.

Summary
This article introduces how to use HTML, CSS and jQuery to implement lazy loading of images, and provides specific code examples. By lazily loading images, you can improve the loading performance of web pages, reduce server pressure, and provide a better user experience. I hope this article helps you understand and apply the technique of lazy loading of images and make it useful when developing websites.

The above is the detailed content of HTML, CSS, and jQuery: Tips for lazy loading of images. For more information, please follow other related articles on the PHP Chinese website!