图片懒加载

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

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

//图片懒加载(各分类:商品列表页)
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;i<len;i++){
            e=$(imgs[i]);
            li_top = e.parents("li").offset().top;
            //判断li的top小于(屏幕+滚动高)的高度，即加载
            if(li_top<_sTop){
                //if(e.attr("src")==="img/dd.jpg"){
                if(e.attr("src").indexOf("img/dd.jpg")>0){
                    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);
        };
    }
}

 

 

<ul id="ul_shoplist">
<li class='col3'><img src="img/dd.jpg" data-src="1.png"></li>
<li class='col3'><img src="img/dd.jpg" data-src="2.png"></li>
<li class='col3'><img src="img/dd.jpg" data-src="3.png"></li>
</ul>

<style>
#ul_shoplist li{list-style:none;float:left;border:1px solid #DDD;text-align:center;margin:0px 0px 20px 20px;width:384px;}/*1200宽,一行3张图*/
#ul_shoplist li:hover{border:1px solid #f53b92;}
#ul_shoplist li.col3{width:384px;}/*1200宽,一行3张图*/
#ul_shoplist li.col4{width:283px;}/*1200宽,一行4张图*/
#ul_shoplist li.col5{width:222px;}/*1200宽,一行5张图*/
</style>