延时加载图片(优化版)

在上一篇文章（http://www.cnblogs.com/windinsky/archive/2010/07/09/1774354.html）中，探讨了一下页面图片延时加载的方法，今天重新看了一遍代码，发现其实不必写的那么麻烦，也用不到数组，做了一下修改，精简了一些无用的代码。

延时加载原理：

1、将需要延时加载的图片的src属性去除，新添一个自定义的属性如lazyload，将图片路径存于lazyload属性中。如下

<img lazyload="img/bmw_m1_hood.jpg?1277878639" />

2、Js预加载第一张图片，将lazyload的值赋予img的src属性，并移除lazyload属性。如下

<img src="img/bmw_m1_hood.jpg?1277878639" />

3、为window对象添加scroll（页面滚动）事件，每次触发事件时，计算目前页面中第一张需要延时加载图片的位置是否在可视区域，若在可视区域，将lazyload的值赋予img的src属性，并移除lazyload属性。

以下是经过优化的代码

///<reference path="jquery-1.4.1-vsdoc.js" />
var lazyLoad = {
    /// <summary>
    /// img标签中的存放图片路径的自定义属性名称
    /// </summary>
    AttributeName: "lazyload",
    /// <summary>
    /// 初始化。自动加载第一张图片。
    /// </summary>
    Init: function (v) {
        if (v != undefined && v != null && typeof (v) == "string") {
            this.AttributeName = v;
        }

        if ($("img[" + this.AttributeName + "]").size() > 0) {
            var src = $("img[" + this.AttributeName + "]").eq(0).attr(this.AttributeName);
            $("img[" + this.AttributeName + "]").eq(0).attr("src", src);
            $("img[" + this.AttributeName + "]").eq(0).removeAttr(this.AttributeName);
        }
    },
    /// <summary>
    /// 当scroll事件被触发时，进行加载图片的操作
    /// </summary>
    LoadImage: function (scrolltop) {
        //获取目前第一张需延迟加载的图片，无图片的话就终止
        var currentObj = null;
        if ($("img[" + this.AttributeName + "]").size() > 0) {
            currentObj = $("img[" + this.AttributeName + "]").eq(0);
        }
        else {
            return false;
        }

        //获取窗体的高度
        var windowHeight = $(window).height();
        //获取当前图片相对于页面顶部的偏移量
        var _scrollTop = currentObj.offset().top - windowHeight + currentObj.height();
        //根据scrollTop判断是否显示图片
        if (parseInt(scrolltop) >= parseInt(_scrollTop)) {
            var src = currentObj.attr(this.AttributeName);
            currentObj.attr("src", src);
            currentObj.removeAttr(this.AttributeName);
        }
    },
    /// <summary>
    /// 启动延时加载
    /// <params key="v">img标签中的存放图片路径的自定义属性名称</params>
    /// </summary>
    Run: function (v) {
        this.Init(v);

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

有兴趣的朋友按上篇文章的方法用firebug测测，效果依旧！