javascript图片延迟加载实现方法及思路
本文实例为大家介绍了如何通过javascript来延迟加载图片,分享给大家供大家参考,具体内容如下
当一个网页中含有大量图片时,如果一开始就将图片全部加载完毕,势必会引起性能和效率上的问题,用户可能会由于等待时间过久而离开。
这个时候,我们需要利用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力。
一、延迟加载图片
基本思路如下:
给需要延迟加载的图片设置自定义属性比如lazy-src,存在图片源所在路径。然后将所有需要懒加载的图片放入一个数组,在window.onscroll的时候判断该数组内容是否出现在了用户视线中,如果出现了,就将自定义属性内容赋予图片的src属性。
下面我们来具体谈谈实现步骤。
首先,我们需要定义函数返回浏览器的可视区域位置:
/** *@description:返回浏览器的可视区域位置 *@return:left:左滑轮距离,top:上滑轮距离,width:可见区域宽度,height:可见区域长度 */ functiongetClient(){ varl,t,w,h; l=document.documentElement.scrollLeft||document.body.scrollLeft; t=document.documentElement.scrollTop||document.body.scrollTop; w=document.documentElement.clientWidth; h=document.documentElement.clientHeight; return{left:l,top:t,width:w,height:h}; }
然后定义函数返回待加载资源的位置:
/** *@description:返回待加载资源位置 *@params:p:需要加载的资源节点 *@return:left:左边距离,top:上边距离,width:宽度,height:高度 */ functiongetSubClient(p){ varl=0,t=0,w,h; w=p.offsetWidth; h=p.offsetHeight; while(p.offsetParent){ l+=p.offsetLeft; t+=p.offsetTop; p=p.offsetParent; } return{left:l,top:t,width:w,height:h}; }
接下来定义函数,判断两个矩形区域是否相交:
/** *@decription:判断两个矩阵是否相交,返回一个布尔值 *@params:rec1,rec2:需要比较的节点矩阵 *@return:true:两矩阵相交 */ functioncontains(rec1,rec2){ varlc1,lc2,tc1,tc2,w1,h1; lc1=rec1.left+rec1.width/2; lc2=rec2.left+rec2.width/2; tc1=rec1.top+rec1.height/2; tc2=rec2.top+rec2.height/2; w1=(rec1.width+rec2.width)/2; h1=(rec1.height+rec2.height)/2; returnMath.abs(lc1-lc2)<w1&&Math.abs(tc1-tc2)<h1; }
最后对图片资源进行监视,如果进入用户视野则加载资源:
/** *@description:资源出现在视野中再加载.将资源放入一个数组。 */ vararr=document.getElementsByClassName("divX"); window.onscroll=function(){ varprec1=getClient(); varprec2; for(vari=arr.length-1;i>=0;i--){ if(arr[i]){ prec2=getSubClient(arr[i]); if(contains(prec1,prec2)){ //加载资源 console.log(arr[i].id); arr[i].childNodes[0].src=arr[i].childNodes[0].getAttribute("lazy_src"); deletearr[i]; } } } }
当然,这里只是讲思路,如果用到工程上,还是有很多缺陷,比如性能和兼容性等。所以推荐一款jquery插件:lazyload
1、判断css加载完成
这里顺便说一下如何判断一个web页面的css文件加载完成。我们知道css通过外部文件引入,其实是一个link节点。所以我们只需要通过轮询来判断该link节点的sheet属性或者sheet.cssRules属性,就可以判断该css文件是否完全加载成功。
2、判断图片加载完成
同样的,img标签有一个complete属性,我们只需要通过轮询来查看该属性即可。
functionimgLoad(img,callback){ vartimer=setInterval(function(){ if(img.complete){ callback(img) clearInterval(timer) } },50) } imgLoad(img1,function(){ p1.innerHTML('加载完毕') })
3、判断javascript加载完成
那么如何判断javascript加载完成呢?script节点的onload方法就是加载完成后执行的。ie6和ie7则可通过readyState来判断:
functioninclude_js(file){ var_doc=document.getElementsByTagName('head')[0]; varjs=document.createElement('script'); js.setAttribute('type','text/javascript'); js.setAttribute('src',file); _doc.appendChild(js); if(!/*@cc_on!@*/0){//ifnotIE //Firefox2、Firefox3、Safari3.1+、Opera9.6+supportjs.onload js.onload=function(){ alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+supportjs.onload'); } }else{ //IE6、IE7supportjs.onreadystatechange js.onreadystatechange=function(){ if(js.readyState=='loaded'||js.readyState=='complete'){ alert('IE6、IE7supportjs.onreadystatechange'); } } } returnfalse; }
以上就是本文的全部内容,希望对大家的学习有所帮助。