延時載入圖片(最佳化版)

在上一篇文章（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測測，效果依舊！