懒加载(Lazy Loading),也称为延迟加载,是一种技术,它可以先加载当前页面可视区域的内容,当用户滚动到页面的其他部分时再去加载其他部分的内容,从而减轻页面加载压力,提高页面性能和用户体验。下面是用 JavaScript 实现懒加载的代码:
HTML 代码:
<div class="container">
<img data-src="image1.jpg" class="lazy">
<img data-src="image2.jpg" class="lazy">
<img data-src="image3.jpg" class="lazy">
<img data-src="image4.jpg" class="lazy">
<img data-src="image5.jpg" class="lazy">
<img data-src="image6.jpg" class="lazy">
</div>
JavaScript 代码:
window.addEventListener('DOMContentLoaded', function() {
let images = document.querySelectorAll('.lazy');
function lazyLoad() {
images.forEach(image => {
if (image.offsetTop < window.innerHeight + window.pageYOffset && !image.src) {
image.src = image.dataset.src;
}
});
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('orientationchange', lazyLoad);
lazyLoad();
});
在上面的示例中,我们首先获取了所有带有 lazy 类的图像元素,然后定义了一个函数 lazyLoad(),这个函数遍历了图片元素,如果图片元素的顶部距离小于当前可视区域的高度加上滚动距离,并且图片元素还没有加载过,那么就将图片元素的 data-src 属性赋值给它的 src 属性,实现了懒加载的效果。
最后,我们给 window 对象添加了三个事件监听器:scroll、resize 和 orientationchange。这几个事件监听器都会触发 lazyLoad() 函数,以便在滚动、调整大小或旋转设备时及时加载图片。