图片懒加载

在一个项目中，如果同时加载的图片太多的话，会导致页面卡顿，这个时候就会用到懒加载。懒加载的实现原理是监听浏览器的滚动条事件，先加载出前面几张图片，然后当滚动条滚动的时候再依次加载剩余的图片。（先在图片那里设置属性data-img="";然后调用方法，在适当的时候把src设置为data-img的值）

----------------------JS如下（HTML省略）

//懒加载图片
var lazyLoad = (function(){
    var clock;
    function init(){
        $(".datagrid-view2 .datagrid-body").on("scroll", function(){//对当前的滚动条对象进行监听，如果是整个浏览器滚动条，则是$(window)
            if (clock) {
                clearTimeout(clock);
            }
            clock = setTimeout(function(){
                checkShow();
            }, 200);
        });
        checkShow();
    }

    function checkShow(){
        $("img.lazy").each(function(){
            var $cur =$(this);
            if($cur.attr('isLoaded')){
                return;
            }
            if(shouldShow($cur)){
                showImg($cur);
            }
        });
        $(".centerImgProgress").css("display","none");
    }
    function shouldShow($node){
        var top = $node.offset().top;//每张图片距离页面顶部的高度
        if(top < 1200){
            return true;
        }else{
            return false;
        }
    }
    function showImg($node){
        $node.attr('src', $node.attr('data-img'));
        $node.attr('isLoaded', true);
    }
    return {
        init: init
    }
})()

然后需要在页面初始化加载完成后加上：lazyLoad.init();就可以了。