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.

In the above code,image-containerrepresents the container of the image, andplaceholderis a placeholder that will be displayed before the image is loaded. Thedata-srcattribute of theimgtag stores the real address of the image, while thealtattribute 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-containeruses relative positioning, sets the width to 100%, the height to 0, and passes thepadding-bottomattribute A height ratio is set and can be adjusted according to specific needs..placeholderSets 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 useobject-fitto 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 thedata-srcattribute value of the image to thesrcattribute, 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, useoffset().topto get the top position of each image container, which is the same asscrollTop()andheight()Compare to determine whether it has been scrolled to the visible area. If so, assign the image'sdata-srcattribute value to thesrcattribute 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!