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

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

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();