首页 > 代码库 > 图片懒加载

图片懒加载

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

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

//图片懒加载(各分类:商品列表页)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="http://www.mamicode.com/img/dd.jpg" data-src="http://www.mamicode.com/1.png"></li><li class=‘col3‘><img src="http://www.mamicode.com/img/dd.jpg" data-src="http://www.mamicode.com/2.png"></li><li class=‘col3‘><img src="http://www.mamicode.com/img/dd.jpg" data-src="http://www.mamicode.com/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>