延时加载图片(终极版，解决一行多张图片无法显示的问题)

原理前几篇文章都说过了，以下是修改后的代码：

 

 

var lazyLoad = {

     // / <summary>
     // / img标签中的存放图片路径的自定义属性名称
     // / </summary>
    AttributeName: "lazyload",
     // / <summary>
     // / 判断一张图片是否在当前屏幕中，是否需要显示
     // / </summary>
    IsShow:  function ($img) {
         // 获取窗体的高度
         var windowHeight = $(window).height();
         var scrollTop = $(document).scrollTop();
         var _scrollTop = $img.offset().top - windowHeight;

         if (parseInt(scrollTop) >= parseInt(_scrollTop)) {
             return  true;
        }
         return  false;
    },
    
     // / <summary>
     // / 当scroll事件被触发时，进行加载图片的操作
     // / </summary>
    LoadImage:  function () {
         var _this =  this;
         // 如果页面中有需要延迟加载的图片执行
        $("img[" +  this.AttributeName + "]").show();
         if ($("img[" +  this.AttributeName + "]").size() > 0) {
             // 显示当前屏幕中的图片
             // 循环所有延迟加载图片，判断高度，如果在当前屏幕则显示
            $("img[" +  this.AttributeName + "]").each( function () {
                 if (_this.IsShow($( this))) {
                    $( this).hide();
                     var src = $( this).attr(_this.AttributeName);
                    $( this).attr("src", src);
                    $( this).removeAttr(_this.AttributeName);
                    $( this).fadeTo(700, 1);
                }
            });
        }
        $("img[" +  this.AttributeName + "]").hide();
    },
     // / <summary>
     // / 启动延时加载
     // / <params key="v">img标签中的存放图片路径的自定义属性名称</params>
     // / </summary>
    Run:  function (v) {
         if (v != undefined && v !=  null &&  typeof (v) == "string") {
             this.AttributeName = v;
        }
         this.LoadImage();

         var _this =  this;
         if ($("img[" +  this.AttributeName + "]").size() > 0) {
            $(window).bind("scroll",  function () {
                _this.LoadImage();
            });
        }
    }
};

lazyLoad.Run();