js兑现网页图片延时加载的原理和代码

js实现网页图片延时加载的原理和代码

?

?

?

大家如果使用firebug去查看的话就会发现，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。
实现原理
把所有需要延时加载的图片改成如下的格式：

<img?lazy_src="图片路径"?border="0"/>?

?

?

然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）
代码

?

?

lazyLoad=(function()?{? ?var?map_element?=?{};? ?
var?element_obj?=?[];? ?var?download_count?=?0;? ?
var?last_offset?=?-1;? ?var?doc_body;? ?
var?doc_element;? ?var?lazy_load_tag;? ?
function?initVar(tags)?{? ?doc_body?=?document.body;? ?
doc_element?=?document.compatMode?==?'BackCompat'???doc_body:?document.documentElement;? ?lazy_load_tag?=?tags?||?["img",?"iframe"];? ?
}; ??
? ?function?initElementMap()?{? ?
var?all_element?=?[];? ?//从所有相关元素中找出需要延时加载的元素? ?
for?(var?i?=?0,? ?len?=?lazy_load_tag.length;?i?<?len;?i++)?{? ?
var?el?=?document.getElementsByTagName(lazy_load_tag[i]);? ?for?(var?j?=?0,? ?
len2?=?el.length;?j?<?len2;?j++)?{? ?if?(typeof(el[j])?==?"object"?&&?el[j].getAttribute("lazy_src"))?{? ?
element_obj.push(all_element[key]);? ?}? ?
}? ?}? ?
? ?for?(var?i?=?0,? ?
len?=?element_obj.length;?i?<?len;?i++)?{? ?var?o_img?=?element_obj[i];? ?
var?t_index?=?getAbsoluteTop(o_img); ?//得到图片相对document的距上距离? ?
if?(map_element[t_index])?{? ?map_element[t_index].push(i);? ?
}?else?{? ?//按距上距离保存一个队列? ?
var?t_array?=?[];? ?t_array[0]?=?i;? ?
map_element[t_index]?=?t_array;? ?download_count++;//需要延时加载的图片数量? ?
}? ?}? ?
? ?};? ?
function?initDownloadListen()?{? ?if?(!download_count)?return;? ?
var?offset?=?(window.MessageEvent?&&?!document.getBoxObjectFor)???doc_body.scrollTop:?doc_element.scrollTop;? ?//可视化区域的offtset=document的高+? ?
var?visio_offset?=?offset?+?doc_element.clientHeight;? ?if?(last_offset?==?visio_offset)?{? ?
setTimeout(initDownloadListen,?200);? ?return;? ?
}? ?last_offset?=?visio_offset;? ?
var?visio_height?=?doc_element.clientHeight;? ?var?img_show_height?=?visio_height?+?offset;? ?
for?(var?key?in?map_element)?{? ?if?(img_show_height?>?key)?{? ?
var?t_o?=?map_element[key];? ?var?img_vl?=?t_o.length;? ?
for?(var?l?=?0;?l?<?img_vl;?l++)?{? ?element_obj[t_o[l]].src?=?element_obj[t_o[l]].getAttribute("lazy_src");? ?
}? ?delete?map_element[key];? ?
download_count--;? ?}? ?
}? ?setTimeout(initDownloadListen,?200);? ?
};? ?function?getAbsoluteTop(element)?{? ?
if?(arguments.length?!=?1?||?element?==?null)?{? ?return?null;? ?
}? ?var?offsetTop?=?element.offsetTop;? ?
while?(element?=?element.offsetParent)?{? ?offsetTop?+=?element.offsetTop;? ?
}? ?return?offsetTop;? ?
}? ?function?init(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");? ?? ?
});?

?

?