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

Question

简而言之，我有一个非常大的照片库，并且我试图在加载第一页时缓存尽可能多的缩略图。可能有 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图片很多。我是不是要求太多了？

Answer 1

查看该预加载脚本后，该脚本似乎不会等待一个图像加载就继续处理下一个图像。我相信这就是导致您的浏览器挂起的原因 - 您实际上是在告诉浏览器同时加载一百张图像。

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

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

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);
};

我仍然很好奇，在包含许多其他内容的完整网页上，从性能角度来看，这将如何表现。让我们知道进展如何。

Answer 2

这是一个有趣的性能问题。当您预加载所有内容时，它在 Firebug 或 Chrome 开发人员工具中的执行情况如何？这让我想到这将是延迟加载插件的一个很好的用途。

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