当前位置:Gxl网 > 互联网 > 图片懒加载

图片懒加载

时间:2021-07-01 10:21:17 帮助过:1人阅读

页面初始化时,所有商品全是默认图片

当屏幕向下滚动,超过下边框的所有图片都显示

//图片懒加载(各分类:商品列表页)
var waterfull = {
    init: function(col) { 
        window.onscroll=this.throttle(this.isScroll, 150);
        this.isScroll();//初始化
    },
    isScroll:function(){
        //console.log("isScroll");
        var _this=this;
        var _height=parseInt($(window).height());
        var _srcoll=parseInt($(window).scrollTop());
        var _sTop=_height+_srcoll;
        //var _sTop=_height+_srcoll-502;//一行3列的高度
        //var _sTop=_height+_srcoll-405;//一行4列的高度

        var imgs=$("img[data-src]");
        var len=imgs.length;
        var e;
        var li_top;

        for(var i=0;i0){
                    e.attr("src",e.attr("data-src"));
                }
            }
        }
    },

    throttle: function(fn, delay){
        var timer = null;
        var _this=this;
        return function(){
            var context = _this, args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn.apply(context,args)}, delay);
        };
    }
}

 

 

 

图片懒加载,布布扣,bubuko.com