?

?

?

大家如果使用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