JavaScript 预加载是如何工作的？

我不想知道预加载图像的方法，我在网上找到了很多，但我想知道它是如何工作的。 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();

您的基本 Javascript 预加载器执行以下操作：

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

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

讨论的一个有趣的问题在这个问题中当您有一组图像并尝试使用相同的 Image 对象预加载它们时，会发生什么：

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

这只会预加载最后一个图像，因为在循环再次更改对象源之前，其余图像将没有时间预加载。查看这方面的示例。单击按钮后，您应该能够立即看到第二个图像，但第一个图像必须加载，因为当您尝试查看它时它没有机会预加载。

因此，一次执行多项操作的正确方法是：

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