js图片懒加载

图片懒加载也称为图片延时加载，主要表现为，当页面被请求时，只加载可视区的图片，其他部分的图片则不加载，以一张默认图片代替。

1.一般情况下，我们会给图片的src设置为默认的logo图，而把真实图片地址存放在一个自定义属性data-src里,并加上class标识。
2.图片的动态加载就是通过class获取img元素的data-src属性的值替换成图片的src。
3.设置一个定时器，判断滚动是否已停止。

html代码

1
<img src = "images/logo.png" class="lazy_img" data-src = "http://imageserver/xxx.jpg"/>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//定义滚动状态变量，用于标识是否有过滚动
var is_scroll = true;
//定义滚动高度的纪录值，定时器会定时对比该值与当前scrollTop值，来判断滚动是否已停止
var gb_k =0;
var gb_scrollTop =0;
var gb_scrollBottom =0;
		
//替换图片真实地址方法
function buildImg(){  
    $('img.lazy_img').each(function(){
        var $img=$(this);
        var tmpTop=$img.offset().top;
        if(tmpTop+300>gb_scrollTop && tmpTop<gb_scrollBottom){
            if($img.attr('data-src'))
                $img.attr('src',$img.attr('data-src'));
        }
    });
}
		
//每当有滚动发生，把滚动状态打开
$(document).scroll(function(){
    is_scroll=true;
});
		
//定时器
setInterval(function(){  
    if(is_scroll){
        //滚动状态开启时做比对
        gb_scrollTop=document.body.scrollTop==0?document.documentElement.scrollTop:document.body.scrollTop;
        gb_scrollBottom=gb_scrollTop+document.documentElement.clientHeight;
        if(gb_k==gb_scrollTop){
            //滚动0.4秒无变化，被认为已停止，开始加载当前可视范围内的图片
            buildImg();
            //滚动状态关闭
            eScroll=false;
        }else
            gb_k=gb_scrollTop;
    }
},400);

效果演示：点击demo

参考资料：
懒加载——网页图片的加载技术
大量图片的列表，图片延迟加载的实现，监听页面滚动，减少客户端和网络的压力