javascript图片延迟加载实现方法及思路_javascript技巧

《javascript图片延迟加载实现方法及思路_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、javascript图片延迟加载实现方法及思路本文实例为人家介绍了如何通过javascript來延迟加载图片，分享给人家供人家参考，具体内容如下当一个网页屮含冇大量图片时，如果一开始就将图片全部加载完毕，势必会引起性能和效率上的问题，用户可能会由于等待时间过久而离开。这个吋候，我们需要利用懒加载，也就是延迟加载图片的方式，来提高网站的亲和力。一、延迟加载图片基本思路如下：给需要延迟加载的图片设置自定义属性比如lazy-src,存在图片源所在路径。然后将所有需要懒加载的图片放入一个数组，在window,on

2、scroll的吋候判断该数组内容是否出现在了用户视线中，如果出现了，就将自定义属性内容赋予图片的src属性。下而我们来具体谈谈实现步骤。首先，我们需要定义函数返冋浏览器的可视区域位置：/***©description:返回浏览器的可视区域位置*@return:left:左滑轮距离，top：上滑轮距离，width：可见区域宽度，height：可见区域长度*/functiongetClient(){var1,t,w,h;1=document.documentElement.scrollLeft

3、

4、docume

5、nt.body.scrollLeft;t二document.documentElement.scrollTopI

6、document.body.scrollTop;w=document,documenlElement,clienlWidth;h=document.documentElement.dientlleight;rctuim{left:1,top:t,width:w,height:h};}然后定义函数返冋待加载资源的位置：/***©description:返回待加载资源位置*©params:p:需要

7、加载的资源节点*©return:left:左边距离，top：上边距离,width：宽度,height：高度*/functiongetSubClient(p){var1=0,t二0,w,h;w=p.offsctWidth;h=p.offsetHeight;while(p.offsetParent){1+二p.offsetLeft;t+二p.offsetTop;p=p.offsctParcnt;}return{left:1,top:t,width:w,height:h};}接下来定义函数，判断两个矩形区域是否

8、相交：/***@decription:判断两个矩阵是否相交，返冋一个布尔值*©params:recl,rec2:需要比较的节点矩阵*@rcturn:true：两矩阵相交*/functioncontains(reel,rec2){varlcl,lc2,tel,tc2,wl,hl;lei二reel,left+reel,width/2;lc2=rcc2.left+rcc2.width/2;tel=reel.top+reel・height/2;tc2=rec2.top+rec2.height/2;wl二(reel

9、,width+rec2.width)/2;hl二(reel,height+rec2.height)/2;rcturnMath,abs(lcl-lc2)

10、Client();varprcc2;for(vari=arr.1ength-1;i>=0;i--){if(arr[i]){prec2二getSubClient(arr[i]);if(contains(precl,prec2)){〃加载资源consolc.log(eirr[i]・id);arr[i]・childNodes[0]・src=arr[i].childNodes[0].getAttribute(，zlazy_src，z);deletearr[i];当然，这里只是讲思路，如果用到工程上，还是有很多缺陷

11、，比如性能和兼容性等。所以推荐一款jquery插件：lazyload1、判断css加载完成这里顺便说一下如何判断一个web页而的css文件加载完成。我们知道css通过外部文件引入，其实是一个link节点。所以我们只需要通过轮询来判断该link节点的sheet属性或者sheet.cssRules属性,就可以判断该css文件是否完全加载成功。2、判断图片加载完成同样的，img标签有一个complete屈性，我们只需要通过轮询来查看