好资源导航 » 文章资讯 » 前端图片懒加载(lazyload)的实现方法(提高用户体验)

前端图片懒加载(lazyload)的实现方法(提高用户体验)

2023-09-26 03:51:20 47

定义

图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力。

惰性加载是程序人性化的一种体现，提高用户体验，防止一次性加载大量数据，而是根据用户需要进行资源的请求。

实现

懒加载的难点在于确定某张图片是否是用户需要的资源，在浏览器中，用户需要的是可视区内的资源，因此我们只需要判断图片是否已经呈现在可视区内，当图片呈现在可视区内时，获取图片的真实地址并赋给该图片即可(图片宽高需要指定，可以利用padding处理)。

判断是否存在于可视区

浏览器视口高度

待加载资源距离视口顶端位置

通过以上两点即可判断图片是否位于可视区内。

varnodes=document.querySelectorAll('img[data-src]'),
elem=nodes[0],
rect=elem.getBoundingClientRect(),
vpHeight=document.documentElement.clientHeight;
if(rect.top=0){
console.log('show')
}

之后获取图片的真实地址


...

varsrc=elem.dataset.src;

把真实地址赋给图片

varimg=newImage();
img.onload=function(){
elem.src=img.src;
}
img.src=src;

完整代码

varscrollElement=document.querySelector('.page'),
viewH=document.documentElement.clientHeight;
functionlazyload(){
varnodes=document.querySelectorAll('img[data-src]');
Array.prototype.forEach.call(nodes,function(item,index){
varrect;
if(item.dataset.src==='')return;
rect=item.getBoundingClientRect();
if(rect.bottom>=0&&rect.top=time){
fun.apply(context,args);
startTime=curTime;
}else{
timeout=setTimeout(fun,delay);
}
};
};

总结

以上所述是小编给大家介绍的前端图片懒加载(lazyload)的实现方法(提高用户体验)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

前端图片懒加载(lazyload)的实现方法(提高用户体验)

热门推荐

随机推荐