jQuery图像预加载/缓存暂停浏览器

时间:2010-06-15 02:51:45

标签: jquery image image-preloader

简而言之,我有一个非常大的照片库,我试图在第一页加载时尽可能多地缓存缩略图。可能有1000多个缩略图。

第一个问题 - 尝试预加载/缓存那么多是愚蠢的吗?

第二个问题 - 当preload()函数触发时,整个浏览器停止响应一分钟到两分钟。此时回调会触发,因此预加载完成。是否有办法实现“智能预加载”,在尝试加载这么多对象时不会妨碍用户体验/速度?

$.preLoadImages功能来自此处:http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html

以下是我如何实施它:

$(document).ready(function() {
    setTimeout("preload()", 5000);
});
function preload() {
    var images = ['image1.jpg', ... 'image1000.jpg'];
    $.preLoadImages(images, function() { alert('done'); });
}

1000张图片很多。我问的太多了吗?

2 个答案:

答案 0 :(得分:6)

查看该预加载脚本后,似乎脚本不会等待加载一个图像,然后再转到下一个图像。我相信这是导致浏览器挂起的原因 - 你实际上是在告诉浏览器同时加载一百张图像。

更好的方法是使用递归函数,仅在第一个图像完成后才开始加载下一个图像。这是我放在一起的一个简单例子。

编辑:这会导致堆栈溢出错误,请参阅下面的新版本。

var preLoadImages = function(imageList, callback) {
    var count = 0;
    var loadNext = function(){
        var pic = new Image();
        pic.onload = function(){
            count++;
            if(count >= imageList.length){
                callback();
            }
            else{
                loadNext();
            }
        }
        pic.src = imageList[count];
    }
    loadNext();
};

$(document).ready(function(){
    var files = ['file1,jpg', 'file2.jpg'];
    preLoadImages(files, function(){ alert("Done!"); });
});

同样,重要的是确保您只是强制浏览器一次下载一个图像。除此之外,您可能会将浏览器锁定,直到它们全部完成。

-

编辑:新版本没有递归。我用1000多个项目阵列测试了这个并没有遇到任何错误。我的想法是用间隔和布尔值替换递归;每50毫秒,我们轮询一下这个函数并询问“任何加载?”如果答案是否定的,我们将继续排队下一张图片。这一遍又一遍地重复,直到完成所有操作。

var preLoadImages = function(imageList, callback) {
    var count = 0;
    var loading = false;
    var loadNext = function(){
        if(!loading){
            loading = true;
            count++;
            pic = new Image();
            pic.onload = function(){
                loading = false;
                if(count >= imageList.length-1){
                        clearInterval(loadInterval);
                        callback();
                }
            }
            pic.src = imageList[count];
        }
    }
    var loadInterval = window.setInterval(loadNext, 50);
};

我仍然很好奇这将如何做,性能明智,在一个包含许多其他内容的完整网页上。让我们知道它是怎么回事。

答案 1 :(得分:0)

这是一个有趣的性能问题。当您预装所有内容时,它在Firebug或Chrome开发者工具中的表现如何?这让我想到这是一个很好用的Lazy Load Plugin

  

Lazy loader是一个jQuery插件   在JavaScript中。它延迟了装载   (长)网页中的图像。图片   在视口之外(可见部分)   网页)不会在用户之前加载   滚动到他们。这与之相反   图像预加载。