js实现监听页面滚动实现图片延迟加载

首先，遍历出所有商品资源，给图片的 src 设置为 logo 图，把真实地址放在 rel 属性内，并加上 class 标识

<img src="/images/logo.png" class="delate_img" rel="http://imageserver/xxx.jpg" />

然后，设置一个定时器，检查是否进行过滚动，滚动是否停止，若进行了滚动，且滚动已停止，则对可视范围内的图片地址以真实地址替换

//定义滚动状态变量，用于标识是否有过滚动
eScroll=true;
//定义滚动高度的记录值，定时器会定时对比该值于当前 scrollTop 值，来判断滚动是否已停止
gb_k=0;
 
//替换图片真实地址方法
function buildImg(){
    $('img.delate_img').each(function(){
        var $img=$(this);
        var tmpTop=$img.offset().top;
        if(tmpTop+200>gb_scrollTop && tmpTop<gb_scrollBottom){
            if($img.attr('rel'))
                $img.attr('src',$img.attr('rel'));
        }
    });
}
 
//每当有滚动发生，把滚动状态打开
$(document).scroll(function(){
    eScroll=true;
});
 
//定时器
setInterval(function(){
    if(eScroll){
        //滚动状态开启时做比对
        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);