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

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

定义

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

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

实现

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

判断是否存在于可视区

浏览器视口高度

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

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

var nodes = document.querySelectorAll('img[data-src]'),

elem = nodes[0],

rect = elem.getBoundingClientRect(),

vpHeight = document.documentElement.clientHeight;

if(rect.top < vpHeight && rect.bottom>=0) {

console.log('show')

}

之后获取图片的真实地址

...

把真实地址赋给图片

var img = new Image();

img.onload = function(){

elem.src = img.src;

}

img.src = src;

完整代码

var scrollElement = document.querySelector('.page'),

viewH = document.documentElement.clientHeight;

function lazyload(){

var nodes = document.querySelectorAll('img[data-src]');

Array.prototypeBETQgP.forEach.call(nodes,function(item,index){

var rect;

if(item.dataset.src==='') return;

rect = item.getBoundingClientRect();

if(rect.bottom>=0 && rect.top < viewH){

(function(item){

var img = new Image();

img.onload = function(){

item.src = img.src;

}

img.src = item.dataset.src

item.dataset.src = ''

})(item)

}

})

}

lazyload();

scrollElement.addEventListener('scroll',throttle(lazyload,500,1000));

function thrBETQgPottle(fun, delay, time) {

var timeout,

startTime = new Date();

return function() {

var context = this,

args = arguments,

curTime = new Date();

clearTimeout(timeout);

if (curTime - startTime >= time) {

fun.apply(context, args);

startTime = curTime;

} else {

timeout = setTimeout(fun, delay);

}

};

};

总结

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。