javascript实现图片延迟加载方法汇总(三种方法)
看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的。原理是这样:页面可见区域以下的图片先不加载,等到用户向下滚动到图片位置时,再进行加载。这样做的好处在哪里?——当页面有好几屏内容时,有可能用户只看前几屏的内容,这样我们就可以只加载用户需要看的图片,减少服务器向用户浏览器发送图片文件所产生的负荷,下面通过三种方法给大家介绍js实现图片延时加载。
js实现图片延迟加载方法一:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <title>lazyImage2.html</title> <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> <metahttp-equiv="description"content="thisismypage"> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <!--<linkrel="stylesheet"type="text/css"href="./styles.css"mce_href="styles.css">--> </head> <bodystyle="text-align:center"mce_style="text-align:center"> <p> </p><p> </p><p> </p><p> </p><p> </p> <divstyle="height:1290px;width:800px;border:1px;background:gray;"></div> <divstyle="height:150px;width:800px;border:1px;background:green;"></div> <imgclass="lazy"src="images/sprite.gif"mce_src="images/sprite.gif"alt="images/lazyloadImg.jpg"/> <scripttype="text/javascript"><!-- 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; } }; //--></script> </body> </html>
js实现网页图片延时加载方法二:
再没贴代码之前先给大家讲下js实现图片延时加载的原理。
实现原理:
把所有需要延时加载的图片改成如下的格式:
<imglazy_src="图片路径"border="0"/>
然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片):
JS代码:
lazyLoad=(function(){ varmap_element={}; varelement_obj=[]; vardownload_count=0; varlast_offset=-1; vardoc_body; vardoc_element; 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(){ varall_element=[]; //从所有相关元素中找出需要延时加载的元素 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("lazy_src")){ element_obj.push(all_element[key]); } } } for(vari=0, len=element_obj.length;i<len;i++){ varo_img=element_obj[i]; vart_index=getAbsoluteTop(o_img);//得到图片相对document的距上距离 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; //可视化区域的offtset=document的高+ 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; 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("lazy_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(); }; return{ init:init } })();
使用方法:把页面上需要延时加载的图片src改成为lazy_src,然后把上面的js放到body最后面,然后调用:lazyLoad.init();
调戏的方法可以使用firebug来查看一时图片是否是延时加载。
另外:
如果你的页面上存在有内容切换的栏目的话,可能在切换时切换的内容里的图片可能会不显示,处理的方法是在内容时单独图片加载处理,如:
///切换内容的代码… chlid.find("img[init_src]").each(function(){ $(this).attr("src",$(this).attr("init_src")); $(this).removeAttr("init_src"); });
原生态js实现图片延时加载方法三:
<!doctypehtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>通过原生js延迟加载图片</title> <styletype="text/css"> div{width:100px;height:100px;background:#F00;margin-bottom:30px} </style> </head> <body> <div><imgdata-url="http://www.pokemon.name/w/image/Sprites/PDW/001.png "src="a.gif"/></div> <div><imgdata-url="http://www.pokemon.name/w/image/Sprites/PDW/002.png "src="a.gif"/></div> <div><imgdata-url="http://www.pokemon.name/w/image/Sprites/PDW/003.png "src="a.gif"/></div> <div><imgdata-url="http://www.pokemon.name/w/image/Sprites/PDW/004.png "src="a.gif"/></div> </body> //以上图片测试时可用复制多点 <scripttype="text/javascript"> (function(){ //common functiontagName(tagName){ returndocument.getElementsByTagName(tagName); } function$(id){ returndocument.getElementById(id); } functionaddEvent(obj,type,func){ if(obj.addEventListener){ obj.addEventListener(type,func,false); }elseif(obj.attachEvent){ obj.attachEvent('on'+type,func); } } //这里可以按照需要配置些参数 varv={ eleGroup:null, eleTop:null, eleHeight:null, screenHeight:null, visibleHeight:null, scrollHeight:null, scrolloverHeight:null, limitHeight:null } //对数据进行初始化 functioninit(element){ v.eleGroup=tagName(element) screenHeight=document.documentElement.clientHeight; scrolloverHeight=document.body.scrollTop; for(vari=0,j=v.eleGroup.length;i<j;i++){ if(v.eleGroup[i].offsetTop<=screenHeight&&v.eleGroup[i].getAttribute('data-url')){ v.eleGroup[i].setAttribute('src',v.eleGroup[i].getAttribute('data-url')); v.eleGroup[i].removeAttribute('data-url') } } } functionlazyLoad(){ if(document.body.scrollTop==0){ limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight; }else{ limitHeight=document.body.scrollTop+document.documentElement.clientHeight; } for(vari=0,j=v.eleGroup.length;i<j;i++){ if(v.eleGroup[i].offsetTop<=limitHeight&&v.eleGroup[i].getAttribute('data-url')){ v.eleGroup[i].src=v.eleGroup[i].getAttribute('data-url'); v.eleGroup[i].removeAttribute('data-url') } } } init('img') addEvent(window,'scroll',lazyLoad); })() </script> </html>
以上内容通过三种方法介绍了js实现图片延时加载,希望大家喜欢。