javascript瀑布流式图片懒加载实例
最近项目使用到了“懒加载”,现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js。当然也可以和jQuery通用。
代码如下:
/** *Createdbyzhiqiangon2015/10/14. *hpuhouzhiqiang@gmail.com *图片的懒加载 **/ functionloadImgLazy(node){ varlazyNode=$('[node-type=imglazy]',node), mobileHeight,lazyOffSetHeight,tempHeight,currentNodeTop,imgObject, imgDataSrc,localUrl; localUrl=location.href; //获取当前浏览器可视区域的高度 mobileHeight=$(window).height(); returnfunction(co){ varconf={ 'loadfirst':true, 'loadimg':true }; for(variteminconf){ if(iteminco){ conf[item]=co[item]; } } varthat={}; var_this={}; /** *[replaceImgSrc动态替换节点中的src] *@param{[type]}tempObject[description] *@return{[type]}[description] */ _this.replaceImgSrc=function(tempObject){ varsrcValue; $.each(tempObject,function(i,item){ imgObject=$(item).find('img[data-lazysrc]'); imgObject.each(function(i){ imgDataSrc=$(this).attr('data-lazysrc'); srcValue=$(this).attr('src'); if(srcValue=='#'){ if(imgDataSrc){ $(this).attr('src',imgDataSrc); $(this).removeAttr('data-lazysrc'); } } }); }); }; /** *首屏判断屏幕上是否出现imglazy节点,有的话就加载图片 *@param{[type]}i){currentNodeTop[description] *@return{[type]}[description] */ _this.loadFirstScreen=function(){ if(conf.loadfirst){ lazyNode.each(function(i){ currentNodeTop=$(this).offset().top; if(currentNodeTop<mobileHeight+800){ _this.replaceImgSrc($(this)); } }); } }; //当加载过首屏以后按照队列加载图片 _this.loadImg=function(){ if(conf.loadimg){ $(window).on('scroll',function(){ varimgLazyList=$('[node-type=imglazy]',node); for(vari=0;i<5;i++){ _this.replaceImgSrc(imgLazyList.eq(i)); } }); } }; that={ replaceImgSrc:_this.replaceImgSrc(), mobileHeight:mobileHeight, objIsEmpty:function(obj){ for(variteminobj){ returnfalse; } returntrue; }, destory:function(){ if(_this){ $.each(_this,function(i,item){ if(item&&item.destory){ item.destory(); } }); _this=null; } $(window).off('scroll'); } }; returnthat; }; }
希望本文对大家学习javascript图片懒加载有所帮助。