图片延迟加载解决方法

原文地址：http://blog.tianxiadiyichi.com/PageDetail.aspx?Id=9

 

今天看到乐淘网图片延迟加载，感觉很好！具体效果：

效果：

1、图片没加载时，有一个正在加载中的动态图片

2、只加载一部分图片，即加载让用户看到的图片，当拖动滚动条时，再加载其他图片

好处：

这样可以大大的减少服务器负担，特别对于图片库这个东西，有时候用户只看第一屏的图片，没必要全部把图片都加载出来，加载一部分，即可以减少服务器负担又可以让用户少了等待的时间！

想看看其方法，通过查看代码发现了另一种解决之道。

方法：

第一步：定义样式，此步骤为了在图片还未完全加载，显示一个动态的正在加载中的图片

假如：图片放在<div class='imgList'><ul><li><a>图片</a></li></ul></div>

样式为：

<style type="text/css">
       .imgList ul{ list-style:none; margin:0px; padding:0px }
       .imgList ul li{ list-style:none; margin:0px; padding:0px; display:inline}
       .imgList ul li a
        {
            background: url(/images/Loading/ajax-loader.gif) no-repeat 50% 50%;
            width:160px; height:80px; display:block;
        }
        .imgList ul li a img{ width:160px; height:80px;}
 </style>

第二步：定义img

<img src='1*1像素图片' lazyload='真实图片url' />

第三步：写延迟加载js

var lazyLoad = {
    Init: function () {
        return $("img[lazyload]");
    },
    Calculate: function (lazyloadobject) {
        var windowHeight = $(window).height();
        var arrReturn = {};
        var _scrollTop;
        if (lazyloadobject.length == 0) {
            return null;
        }
        else {
            lazyloadobject.each(function (i) {
                _scrollTop = parseInt($(this).offset().top - windowHeight);
                if (!arrReturn.hasOwnProperty(_scrollTop)) {
                    arrReturn[_scrollTop] = new Array();
                }
                arrReturn[_scrollTop].push($(this));
            });
            this.ArrLoad = arrReturn;
            return arrReturn;
        }
    },
    ArrLoad: null,
    IsLoad: function (scrolltop, objectstop) {
        if (objectstop != null && objectstop != {}) {
            for (i in this.ArrLoad) {
                if (parseInt(i) <= scrolltop && this.ArrLoad.hasOwnProperty(i)) {
                    for (j = 0; j < this.ArrLoad[i].length; j++) {
                        this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
                    }
                    delete this.ArrLoad[i];
                }
            }
        }
    },
    Run: function () {
        var lazyLoadObject = this.Init();
        this.Calculate(lazyLoadObject);
        arrScrollTop = this.ArrLoad;
        if (arrScrollTop == null) {
            return false;
        }
        else {
            var _this = this;
            _this.IsLoad($(window).scrollTop(), arrScrollTop);
            $(window).scroll(function () {
                _this.IsLoad($(this).scrollTop(), arrScrollTop);
            });
        }
    }
}
$(function () {
    lazyLoad.Run();
});

$(window).resize(function () {
    lazyLoad.Run();
});

特别备注：

PS：别忘记引用jquey类库