javascript瀑布流式图片懒加载实例解析与优化
之前写过一版图片“懒加载”的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。
这篇文章主要就是结合上篇《javascript瀑布流式图片懒加载实例》再来看看图片“懒加载”的一些知识。
图片“懒加载”的主旨：
按照需要加载图片，也就是说需要显示的时候再加载图片显示，减少一次性加载的网络带宽开销。
先来看一段代码：
varconf={
'loadfirst':true,
'loadimg':true
};
for(variteminconf){
if(iteminco){
conf.item=co.item;
}
}
这里我主要是想实现，用户配置和默认配置的合并，这样写代码并不是很优雅，现在使用$.extend来做优化，代码如下：
_this.setting={
"mobileHeight":0,//扩展屏幕的高度，使第一屏加载个数可配置
"loadNum":1//滚动时，当前节点之后加载个数
};
$.extend(_this.setting,_this.getSetting());
这里重点介绍下，我新添加的两个参数mobileHeight,loadNum
mobileHeight默认客户端的高度，值越大，首屏加载的图片越多;
loadNum如果当前节点出现在屏幕上以后，可以一次性加载当前节点之后的若干个节点，可以跳高图片的加载速度;
之前我的代码是这样子写的：
_this.loadFirstScreen=function(){
if(conf.loadfirst){
lazyNode.each(function(i){
currentNodeTop=$(this).offset().top;
//这里的800就是上面提到的mobileHeight
if(currentNodeTop<mobileHeight+800){
_this.replaceImgSrc($(this));
}
});
}
};
_this.loadImg=function(){
if(conf.loadimg){
$(window).on('scroll',function(){
varimgLazyList=$('[node-type=imglazy]',node);
//这里的5就是上面提到的loadNum
for(vari=0;i<5;i++){
_this.replaceImgSrc(imgLazyList.eq(i));
}
});
}
};
按照可配置的想法来优化我现在的代码就是下面的这个样子的：
loadFirstSrceen:function(){
//加载首屏
var_this=this;
varcurrentNodeTop;
varimgNodeList=_this.imgNode;
$(imgNodeList).each(function(){
currentNodeTop=$(this).offset().top;
if(currentNodeTop<_this.mobileHeight()+_this.setting.mobileHeight){
_this.replaceImgSrc($(this));
}
});
},
scrollLoadImg:function(){
//滚动的时候加载图片
var_this=this;
varcurrentNodeTop;
varscrollTop=$('body').scrollTop();
varimgLazyList=$('[node-type=imglazy]');
$(imgLazyList).each(function(){
currentNodeTop=$(this).offset().top;
if(currentNodeTop-scrollTop<_this.mobileHeight()){
//加载当前节点后的规定个数节点
for(vari=0,len=_this.setting.loadNum;i<len;i++){
_this.replaceImgSrc($(imgLazyList).eq(i));
}
returnfalse;
}
});
}
更重要的一个方面就是按照编写插件的思想来组织现在的代码结构。代码如下：
;(function($){
varLoadImgLazy=function(imgNode){
var_this=this;
_this.imgNode=imgNode;
_this.setting={
"mobileHeight":0,//扩展屏幕的高度，使第一屏加载个数可配置
"loadNum":1//滚动时，当前节点之后加载个数
};
$.extend(_this.setting,_this.getSetting());
_this.loadFirstSrceen();
$(window).on('scroll',function(){
_this.scrollLoadImg();
});
};
LoadImgLazy.prototype={
mobileHeight:function(){
return$(window).height();
},
loadFirstSrceen:function(){
//加载首屏
var_this=this;
varcurrentNodeTop;
varimgNodeList=_this.imgNode;
$(imgNodeList).each(function(){
currentNodeTop=$(this).offset().top;
if(currentNodeTop<_this.mobileHeight()+_this.setting.mobileHeight){
_this.replaceImgSrc($(this));
}
});
},
scrollLoadImg:function(){
//滚动的时候加载图片
var_this=this;
varcurrentNodeTop;
varscrollTop=$('body').scrollTop();
varimgLazyList=$('[node-type=imglazy]');
$(imgLazyList).each(function(){
currentNodeTop=$(this).offset().top;
if(currentNodeTop-scrollTop<_this.mobileHeight()){
//加载当前节点后的规定个数节点
for(vari=0,len=_this.setting.loadNum;i<len;i++){
_this.replaceImgSrc($(imgLazyList).eq(i));
}
returnfalse;
}
});
},
replaceImgSrc:function(loadImgNode){
//动态替换图片
varsrcValue;
varimgDataSrc;
var_this=this;
varimgUrlList=$(loadImgNode).find('img[data-lazysrc]');
if(imgUrlList.length>0){
imgUrlList.each(function(i){
imgDataSrc=$(this).attr('data-lazysrc');
srcValue=$(this).attr('src');
if(srcValue==='#'){
if(imgDataSrc){
$(this).attr('src',imgDataSrc);
$(this).removeAttr('data-lazysrc');
}
}
});
//移除已经运行过懒加载节点的node-type对性能提升
$(loadImgNode).removeAttr('node-type');
}
},
getSetting:function(){
varuserSetting=$('[lazy-setting]').attr('lazy-setting');
if(userSetting&&userSetting!==''){
return$.parseJSON(userSetting);
}else{
return{};
}
},
destory:function(){
//销毁方法区
$(window).off('scroll');
}
};
LoadImgLazy.init=function(imgNode){
newthis(imgNode);
};
window.LoadImgLazy=LoadImgLazy;
})(Zepto);
通过这篇文章希望大家对javascript瀑布流式图片懒加载有了更深的认识，学会优化方法，谢谢大家的阅读。