页面图片太多如何改善页面加载速度?

在开发人物词条的时候,碰到这个问题。某些领导,因为活动众多,介绍相应也多,一个页面将加载很多图片。这样一来,导致整个页面加载很慢。

有什么方法可以避免加载慢呢?

JQuery为我们提供了两种方案:预加载和惰性加载。

预加载:JQuery应用:图片依次加载代码

$(window).bind('load', function() {
    var preload = new Array();
    $(".hover").each(function() {
        s = $(this).attr("src").replace(/\.(.+)$/i, "_on.$1");
        preload.push(s)
    });
    var img = document.createElement('img');
    $(img).bind('load', function() {
        if(preload[0]) {
            this.src = preload.shift();
        }
    }).trigger('load');
});

惰性加载:JQuery插件:LazyLoad,插件使用方式:

 <script src="jquery.js" type="text/javascript"></script>
 <script src="jquery.lazyload.js" type="text/javascript"></script>

调用:

$("img").lazyload();

两种相反的处理思想,孰优孰劣,看具体需要吧。

发表评论

返回顶部