纯javascript实现图片延时加载方法
最近开始整理一些以前写的好用的插件,…^-^!!!
随着页面信息越来越丰富饱满,尤其像淘宝,京东之类的购物网站,首页就是他们的生命线,--||||
最近在做某银行的网站,只有挤上首页才能得到更多的关注,于是乎各种业务人员就开始了首页位置之争,为了平息他们的战乱。体现我大度包容的一面,啊哈哈哈
首页囊括了他们全部的需求,他们满意的走人了,结果技术经理来了,说首页加载怎么这么大,于是乎,减!!!
首当其冲,缩小图片K数,不够,那怎么办,好吧,进入正题。长页面未显示的部分可以先不加载,省流量就是省钱,开搞!!!
思路就是,判断图片在页面中的位置,如果图片的位置大于小于当前的屏幕高度,那么显示图片,否则隐藏图片。
怎么一开始隐藏图片呢,很简单,<imgcsii_src="1.png">,给一个浏览器不认识的属性csii_src,当需要显示图片的时候在element.src=element.getAttribute("csii_src");,思路很简单吧,上代码了。
functionlazyLoad(){ varmap_element={}; varelement_obj=[]; vardownload_count=0; varlast_offset=-1; vardoc_body=null; vardoc_element=null; varlazy_load_tag=[]; functioninitVar(tags){ doc_body=document.body; doc_element=document.compatMode=='BackCompat'?doc_body :document.documentElement; lazy_load_tag=tags||["img","iframe"]; } ; functioninitElementMap(){ for(vari=0,len=lazy_load_tag.length;i<len;i++){ varel=document.getElementsByTagName(lazy_load_tag[i]); for(varj=0,len2=el.length;j<len2;j++){ if(typeof(el[j])=="object" &&el[j].getAttribute("csii_src")){ element_obj.push(el[j]); } } } for(vari=0,len=element_obj.length;i<len;i++){ varo_img=element_obj[i]; vart_index=getAbsoluteTop(o_img); if(map_element[t_index]){ map_element[t_index].push(i); }else{ vart_array=[]; t_array[0]=i; map_element[t_index]=t_array; download_count++; } } } ; functioninitDownloadListen(){ if(!download_count) return; /*varoffset=(window.MessageEvent&&!document.getBoxObjectFor)?doc_body.scrollTop :doc_element.scrollTop;*/ varoffset; if(os.firefox){ offset=doc_element.scrollTop; }else{ offset=doc_body.scrollTop; } varvisio_offset=offset+doc_element.clientHeight; if(last_offset==visio_offset){ //setTimeout(initDownloadListen,200); return; } last_offset=visio_offset; varvisio_height=doc_element.clientHeight; varimg_show_height=visio_height+offset+20; for(varkeyinmap_element){ if(img_show_height>key){ vart_o=map_element[key]; varimg_vl=t_o.length; for(varl=0;l<img_vl;l++){ element_obj[t_o[l]].src=element_obj[t_o[l]] .getAttribute("csii_src"); } deletemap_element[key]; download_count--; } } //setTimeout(initDownloadListen,200); } ; functiongetAbsoluteTop(element){ if(arguments.length!=1||element==null){ returnnull; } varoffsetTop=element.offsetTop; while(element=element.offsetParent){ offsetTop+=element.offsetTop; } returnoffsetTop; } functioninit(tags){ initVar(tags); initElementMap(); initDownloadListen(); $(window).scroll(function(){ initDownloadListen(); }); } ; init(); }
不足之处,页面结构必须已定好,图片的高度必须设置好,不然,无法计算图片距离顶部的高度。需注意。
我们再来看下另外一个小伙伴是如何实现的
<!-- vartemp=-1;//用来判断是否是向下滚动(向上滚动就不需要判断延迟加载图片了) window.onscroll=function(){ varimgElements=document.getElementsByTagName("img"); varlazyImgArr=newArray(); varj=0; for(vari=0;i<imgElements.length;i++){ if(imgElements[i].className=="lazy"){ lazyImgArr[j++]=imgElements[i]; } } varscrollHeight=document.body.scrollTop;//滚动的高度 varbodyHeight=document.body.offsetHeight;//body(页面)可见区域的总高度 if(temp<scrollHeight){//为true表示是向下滚动,否则是向上滚动,不需要执行动作。 for(vark=0;k<lazyImgArr.length;k++){ varimgTop=lazyImgArr[k].offsetTop;//1305(图片纵坐标) if((imgTop-scrollHeight)<=bodyHeight){ lazyImgArr[k].src=lazyImgArr[k].alt; lazyImgArr[k].className="notlazy" } } temp=scrollHeight; } }; //-->
思路如下:先在<img>标签中将src的值设置为一个极小的图片文件路径,alt属性的值设置为真正要显示的图片文件路径,当向下滚动到图片的位置时,将src的值替换为alt的值,这样就会自动加载真正要显示的图片了,同时,给标签设置一个值为lazy的class,加载完了之后,将其值设置为notlazy,以此来判断哪些图片需要加载,哪些不需要。
代码中的注释已经很清楚了,各位自己慢慢看吧。欢迎扔砖,更欢迎各种改进和完善的建议。