图片懒加载（延迟加载）

图片懒加载（延迟加载）的简单封装，使用jq1.8.3版本

图片懒加载（延迟加载）：浏览器可视区域外的图片不会被载入，直到图片在可视区的时候，设置图片正真的路径，让图片显示出来。

效果：可以加快页面加载速度。减少浏览器的http请求，降低服务器负担。

function showImg(obj, callback) { 
    /*obj图片懒加载(范围)元素父级
    * callback图片懒加载完成后的回调函数
    * img标签结构 例<img src="通用的统一的默认图片链接" data_src="真正要展示的图片链接" err_src="图片呢加载失败后的链接">
    **/
    if (!obj) return;
    /*获取滚动条的距离*/
    var wScroll = $(window).scrollTop(),
        wHeight = $(window).height();
    
    showImg1();
    /*页面滚动的时候绑定事件，
     * 在这里绑定的时候先解除事件绑定，
     * 主要是showImg在重复调用的情况下
     * */
    $(window).off('scroll', showImg1);
    $(window).on('scroll', showImg1);

    function showImg1() {
        $(obj).find('img').each(function() { //遍历所有图片    
            //当前图片对象
            var othis = $(this);
            //当前图片距页面顶部距离
            var offsTop = $(this).offset().top; 
            //当前图片高度
            var tHeight = $(this).height();                     
            //页面可视区底部
            var wBottom = wScroll + wHeight; 
             //当前图片底距顶部高度
            var wTop = offsTop + tHeight;
            
            //如果该图片在可视区可见
            if (wBottom >= offsTop && wTop >=wScroll) { 
                //可见的时候并且存在自定义属性data_src,把占位值替换 并删除占位属性   
                if(othis.attr('data_src')){
                    othis.attr('src', othis.attr('data_src')).removeAttr('data_src'); 
                    //如果有需要，引用图片加载失败showImgError方法
                    showImgError(othis);
                    /*这里执行回调函数*/
                    callback&&callback();
                }
            }
        });
    };
    /* 图片加载失败
     * 这里如果图片懒加载失败，再次更换图片
     * 图片标签中需要有 err_src='错误后图片链接' 的自定义属性
     * */
    function showImgError(that){
    　　 that.error(function(){
       　　  if(that.attr('err_src')){
            　　that.attr('src', that.attr('err_src')).removeAttr('err_src');
            }
        });
    }
}