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"
);? ?


? ?


});?

?

?