Image 延迟加载 -- LazyLoad

最新推荐文章于 2021-03-26 00:37:11 发布

原创最新推荐文章于 2021-03-26 00:37:11 发布 · 542 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#image #function #null #delete #2010

Ajax 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的懒加载实现方案，通过JavaScript动态替换图片源，仅在滚动到可视区域时才加载真实图片，以此提高网页加载速度及用户体验。

//LazyLoad //Author:邢达|macrox@163.com //Version:Alfa 0.1 //CreateTime:2010.3.17 var lazyLoad = { Init : function(){ return $("img[lazyload]"); }, Calculate : function(lazyloadobject){ var windowHeight = $(window).height(); var arrReturn = {}; var _scrollTop; if(lazyloadobject.length==0){ return null; } else{ lazyloadobject.each(function(i){ _scrollTop = parseInt($(this).offset().top - windowHeight); if(!arrReturn.hasOwnProperty(_scrollTop)){ arrReturn[_scrollTop] = new Array(); } arrReturn[_scrollTop].push($(this)); }); this.ArrLoad = arrReturn; return arrReturn; } }, ArrLoad : null, IsLoad : function(scrolltop,objectstop){ if(objectstop!=null&&objectstop!={}){ for(i in this.ArrLoad){ if(parseInt(i)<=scrolltop&&this.ArrLoad.hasOwnProperty(i)){ for(j=0;j<this.ArrLoad[i].length;j++){ this.ArrLoad[i][j].attr("src",this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload"); } delete this.ArrLoad[i]; } } } }, Run : function(){ var lazyLoadObject = this.Init(); this.Calculate(lazyLoadObject); arrScrollTop = this.ArrLoad; if(arrScrollTop==null){ return false; } else{ var _this = this; _this.IsLoad($(window).scrollTop(),arrScrollTop); $(window).scroll(function(){ _this.IsLoad($(this).scrollTop(),arrScrollTop); }); } } } $(function(){ lazyLoad.Run(); }); $(window).resize(function(){ lazyLoad.Run(); });

e.gif 为1x1透明图片。

以上资料截取自www.letao.com