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瀑布流式图片懒加载有了更深的认识,学会优化方法,谢谢大家的阅读。