延时加载图片（原创）

访问淘宝的朋友会发现淘宝的产品展示页通常比较长，然后在中间部分有许多张大图（尤其是一些展示衣服的网页），通常有许多用户在打开这个网页后，仅仅是看个价格或简短文字介绍就离开页面了。但整个页面上的大部分图片都已经加载了，或者因为图片未下载完毕导致整个html页迟迟未完成加载，造成用户体验的确实。一些图片很多的网页因为有大量图片动辄达到几mb，由此也造就浪费了极大的带宽。

那有没有办法可以在用户需要看到某张图片的时候再加载图片呢？这样用户如果没有浏览整个网页，图片也不会全部加载，对一些B2C和门户网站来说，积少成多，节省下的流量是非常可观的。使用延时加载技术，可以达到这个目的。

有一个jquery插件叫做Lazy Load Plugin for jQuery（http://www.appelsiini.net/projects/lazyload），在实质上，这个jquery控件并仅仅是

延时显示，并没有达到省带宽的目的。我们可以使用firebug来监控一下，如下图：

我们可以看到，在html页面一加载完毕，所有的图片都已经被加载出来了，在页面向下滚动的过程中，图片仅仅是延时显示出来而已，并没有达到省带宽的目的（有兴趣的朋友可以到http://www.appelsiini.net/projects/lazyload/enabled.html这个地址用firebug测测）。而且这个控件还要预设图片的高和宽。

下边看看使用我的代码达到的效果，同样的页面减少了好几个请求，图片仅仅加载了1张。

 

在页面上向下滚动滑鼠，可以看到图片被加载了

以下是代码延时加载的代码

///<reference path="jquery-1.4.1-vsdoc.js" />

var lazyLoad = {
    /// <summary>
    /// 存储图片路径名的集合
    /// </summary>
    ArrLoad: null,
    /// <summary>
    /// img标签中的存放图片路径的自定义属性名称
    /// </summary>
    AttributeName: "lazyload",
    /// <summary>
    /// 初始化。自动加载第一张图片，并将所有需要延时加载的图片放到数组中
    /// </summary>
    Init: function (v) {
        if (v != undefined && v != null && typeof (v) == "string") {
            this.AttributeName = v;
        }
        var lazyLoadObject = $("img[" + this.AttributeName + "]");

        //检查图片集合数量是否等于0
        if (lazyLoadObject.length == 0) {
            return null;
        }
        else {
            var src = lazyLoadObject.eq(0).attr(this.AttributeName);
            var src1 = lazyLoadObject.eq(0).attr("lazyload");
            //自动将第一张图片加载出来
            lazyLoadObject.eq(0).attr("src", lazyLoadObject.eq(0).attr(this.AttributeName));
            lazyLoadObject.eq(0).removeAttr(this.AttributeName);

            //将所有图片路径存于集合之中
            this.ArrLoad = new Array();
            var _this = this;
            lazyLoadObject.each(function () {
                _this.ArrLoad.push($(this).attr(_this.AttributeName));
            });
            this.ArrLoad.shift();
        }
    },
    /// <summary>
    /// 当scroll事件被触发时，进行加载图片的操作
    /// </summary>
    LoadImage: function (scrolltop) {
        //获取窗体的高度
        var windowHeight = $(window).height();
        //存储当前滚动处的img对象
        var currentObj = null;
        var nextObj = null;

        if ($("img[" + this.AttributeName + "]").eq(0).attr(this.AttributeName) == this.ArrLoad[0]) {
            if ($("img[" + this.AttributeName + "]").size() > 0) {
                currentObj = $("img[" + this.AttributeName + "]").eq(0);
            }
        }

        if (currentObj == null) {
            return null;
        }

        //获取当前图片相对于页面顶部的偏移量
        var _scrollTop = currentObj.offset().top - windowHeight + currentObj.height();
        //根据scrollTop判断是否显示图片
        if (parseInt(scrolltop) >= parseInt(_scrollTop)) {
            //判断是否有下一张图片
            if (this.ArrLoad[0] != undefined && this.ArrLoad[0] != null) {
                //加载下一张图片
                if ($("img[" + this.AttributeName + "]").eq(0).attr(this.AttributeName) == this.ArrLoad[0]) {
                    nextObj = $("img[" + this.AttributeName + "]").eq(0);
                }
                if (nextObj != null && nextObj.attr(this.AttributeName) != undefined) {
                    nextObj.attr("src", nextObj.attr(this.AttributeName));
                    nextObj.removeAttr(this.AttributeName);
                }

                //将已加载的图片从集合中移除
                this.ArrLoad.shift();
                currentObj.removeAttr(this.AttributeName);
            }
        }
    },
    /// <summary>
    /// 启动延时加载
    /// <params key="v">img标签中的存放图片路径的自定义属性名称</params>
    /// </summary>
    Run: function (v) {
        this.Init(v);

        if (this.ArrLoad == null) {
            return false;
        }
        else {
            var _this = this;
            //添加scroll事件
            $(window).scroll(function () {
                _this.LoadImage($(this).scrollTop());
            });
        }
    }
};

调用也很简单，仅需在最后一张需要延时加载的图片后加上如下js代码即可

<script type="text/javascript" src="Scripts/LazeLoad.js"></script>
<script type="text/javascript">
      lazyLoad.Run();
</script>

源代码下载

在另一篇文章（http://www.cnblogs.com/windinsky/archive/2010/07/12/1775582.html）中对代码进行了精简和优化，推荐大家使用那一个。