<img data-src="assets/lazyLoad1.jpg" alt="lazyLoad1">
<img data-src="assets/lazyLoad2.jpg" alt="lazyLoad2">
<img data-src="assets/lazyLoad3.jpg" alt="lazyLoad3">
<img data-src="assets/lazyLoad4.jpg" alt="lazyLoad4">
const imgs=document.getElementsByTagName('img');
function lazyLoad(imgs){
//获取窗口高度
const clientH=document.body.clientHeight;
//获取滚动距离
const clientT=document.body.scrollTop;
for(let i=0; i<imgs.length;i++ ){
if(clientH+clientT>imgs[i].offsetTop && !imgs[i].src){
imgs[i].src=imgs[i].dataset.src
}
}
};
lazyLoad(imgs);
window.onscroll = ()=> lazyLoad(imgs);
使用dataset获取自定义属性的值 ,当窗口高度+顶部滚动距离高出图片顶部偏移量,将data-src赋值给src实现加载图片 ,!imgs[i].src避免重复加载。
当滚动滚动条触发LazyLoad,会频繁的请求,可使用节流方法减少请求次数