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

 

 

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