// 图片懒加载函数
function lazyLoadImages() {
const images = document.querySelectorAll('img[data-src]');
// 视口高度,用于判断图片是否在可视区域内
const viewportHeight = window.innerHeight;
// 滚动事件监听器
function lazyLoad() {
images.forEach(img => {
// 图片顶部距离文档顶部的距离
const imgTop = img.getBoundingClientRect().top;
// 判断图片是否在视口内并且未加载过
if (imgTop < viewportHeight && !img.src) {
img.src = img.getAttribute('data-src');
}
});
}
// 第一次加载
lazyLoad();
// 滚动事件监听
window.addEventListener('scroll', lazyLoad);
}
// 初始化图片懒加载
document.addEventListener('DOMContentLoaded', function() {
lazyLoadImages();
});
-
图片懒加载功能介绍:
- 图片懒加载是一种延迟加载图片的技术,仅当图片进入用户可视区域时才加载,从而减少初始页面加载时间和带宽消耗。
-
代码详细解析:
-
lazyLoadImages
函数:该函数获取所有带有data-src
属性的图片元素,并注册滚动事件监听器。在滚动事件中,检查每张图片是否进入了视口,如果进入则将data-src
属性的值赋给src
属性,从而加载图片。 -
lazyLoad
函数:遍历所有图片元素,通过getBoundingClientRect()
方法获取图片相对于视口的位置信息,判断图片是否在视口内并且是否已加载过。
-
-
初始化:
- 使用
DOMContentLoaded
事件确保在文档加载完毕后初始化图片懒加载功能,以免影响页面初次渲染速度。
- 使用