纯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，以此来判断哪些图片需要加载，哪些不需要。
代码中的注释已经很清楚了，各位自己慢慢看吧。欢迎扔砖，更欢迎各种改进和完善的建议。