大量图片的列表,图片延迟加载的实现,监听页面滚动,减少客户端和网络的压力

瀑布什么的这里不讨论,现在课题在同一页面有大量商品的图片,如果一次性在加载页面的时候全以img的形式加载,将耗费大量的带宽和系统资源。所以,以同一张默认图片代替商品图片被加载,可以保证页面显示的速度,然后根据可视范围判断图片是否进行加载,智能自动的判断,保持页面对用户的友好。

京东在这方面做得很好,不仅图片延迟加载,连商品都是下滚才加载,相当节省资源而且友好。但是,由于本系统需要做全选等操作若对商品做延迟加载将影响全选范围,所以只针对图片加载做优化。

代码:

首先,遍历出所有商品资源,给图片的 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);
若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏