javascript - javascript 预加载如何工作？

Question

我不想知道预加载图像的方法，我在网上找到了很多，但我想知道它是如何工作的。 javascript如何能够预加载图像？ 我的意思是，我从这里尝试了一个片段，即使它有效，它似乎也没有预加载图像。

当我检查 firebug 时，我可以看到图像被加载了两次，一次是在预加载时，另一次是在显示它时!

为了改进这段代码，我想知道它是如何工作的。

这是我的做法:

 function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
            //(new Image()).src = this;
            alert(this +'  &&   ' + i++);

        });
    }

然后我做类似的事情:

preloader = function() {
    preload(myImages);
}

$(document).ready(preloader);

这是我显示/添加图像的方式:

$("li.works").click(function() {
             $("#viewer").children().empty();
             $('#viewer').children().append('<img src=\'images/ref/'+this.firstChild.id+'.jpg\' alt="'+this.firstChild.id+'" \/>')
             $("#viewer").children().fadeIn();

Answer 1

您的基本 Javascript 预加载器执行此操作:

var image = new Image();
image.src = '/path/to/the/image.jpg';

它的工作方式很简单，就是创建一个新的 Image 对象并设置它的 src，浏览器将去抓取图像。我们不会将这个特定图像添加到浏览器，但是当需要通过我们设置的任何方法在页面中显示图像时，浏览器将已经在其缓存中拥有它并且不会再去取。不过，如果不查看代码，我真的无法告诉您为什么您拥有的任何东西都不能以这种方式工作。

讨论的一个有趣问题 in this question当您有一组图像并尝试使用相同的 Image 对象预加载它们时会发生什么:

var images = ['image1.jpg','image2.jpg'];
var image = new Image();
for(var x = 0; x < images.length; x++) {
    image.src = images[x];
}

这只会预加载最后一张图像，因为在循环再次出现以更改对象源之前，其余图像将没有时间预加载。 View an example of this .单击按钮后，您应该能够立即看到第二张图片，但必须加载第一张图片，因为当您尝试查看时它没有机会预加载。

因此，同时执行多项操作的正确方法是:

var images = ['image1.jpg','image2.jpg'];
for(var x = 0; x < images.length; x++) {
    var image = new Image();
    image.src = images[x];
}