今天是

爱酷家


当前位置:首页 > 站长学院 > 其他教程

网站图片延迟加载解决方法

收集整理   发布时间:2012-11-13 19:32:00   阅读

网站图片延迟加载解决方法

效果:

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

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

好处:

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

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

方法:

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

假如:图片放在


样式为:


代码:
<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类库

具体效果看演示:

演示地址:点我看演示



注:⊙如转载本站原创作品,请务必包保留本文地址:

内容: