本帖最后由 上海分校-小影 于 2018-4-27 11:20 编辑
1.什么是懒加载?
当访问一个页面的时候,先把img元素背景图片路径替换成一张替代图片的路径(这样就只需请求一次,占位图),将图片的真实路径存储在img自定义属性中,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。
2.为什么要用懒加载?
很多页面,内容很丰富,页面很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕,提高首屏加载速度,可以减轻服务器压力,节约流量,用户体验好。
3.懒加载实现封装? lazyLoad由四个函数组成,init(初始化函数),checkShow(判断图片是否加载),shouldShow(将要展示的图片),showImg(展示图片)。
1.初始化函数(init) 由于滚动事件太消耗性能,所以用定时器替换,不是滚动就触发,而是滚动后200毫秒后触发。 [JavaScript] 纯文本查看 复制代码 var timer;
function init(){
$(window).on("scroll",function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
checkShow(); //
},200);
});
}
2. 判断'图片是否加载'(checkShow) 函数,如果图片含有'isLoaded'属性,证明图片已经加载过了,直接return。
如果图片没有'isLoaded'属性,进入 '将要展示图片'(shouldShow) 函数。
[JavaScript] 纯文本查看 复制代码 function checkShow(){
$lazyLoad.each(function(){
$cur = $(this);
if($cur.attr('isLoaded')){
return;
}
if(shouldShow($cur)){
showImg($cur);
}
});
} 3. 将要展示图片'(shouldShow)函数,获取屏幕可是高度,滚动高度,要展示的元素到文档的高度,
如果元素到文档的高度小于屏幕的可视高度加上滚动高度,说明元素已经在可视区内,返回true
否则返回false。
[JavaScript] 纯文本查看 复制代码 function shouldShow ($node){
var scrollH = $(window).scrollTop(),
windowH = $(window).height(),
top = $node.offset().top;
if(top < windowH + scrollH){
return true;
} else {
return false;
}
}
4. '展示图片'函数, 将元素的src替换为自定义属性data-src(真正的图片地址)。
[JavaScript] 纯文本查看 复制代码 function showImg ($node){
$node.find("img").attr("src",$node.data("src"));
$node.attr("isLoaded",true);
} 5. 函数返回一个对象。
[JavaScript] 纯文本查看 复制代码 return {
init : init
}
这样就实现懒加载封装啦!
|