有时我们看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。

推荐：

实现原理：

把所有需要延时加载的图片改成如下的格式： 

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

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

JS代码：

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"

);

 

});