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，浏览器将去抓取图像。 我们不会将这个特定图像添加到浏览器中，但是当需要通过我们设置的任何方法在页面中显示该图像时，浏览器将已经将其保存在其缓存中，并且不会再去取吧。 不过，如果不查看代码，我无法真正告诉您为什么您拥有的任何东西都不能以这种方式工作。

在此问题中讨论了一个有趣的问题< /a> 是当您有一组图像并尝试使用相同的 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];
}

Answer 2

JavaScript 预加载的工作原理是利用浏览器使用的缓存机制。

基本思想是，一旦资源被下载，它就会在客户端本地存储一段时间，这样浏览器下次需要显示时就不必再次从网络上检索该资源/由浏览器使用。

您的代码可能工作得很好，您只是误解了 Fire Bug 显示的内容。

要测试这个理论，只需使用干净的缓存访问 www.google.com 即可。 即首先清除您的下载历史记录。

第一次完成所有操作的状态可能为 200 OK。 这意味着您的浏览器请求资源并且服务器发送它。 如果您查看 Fire Bug 窗口的底部，它会显示页面有多大（例如 195Kb）以及从缓存中提取了多少内容。 在本例中为 0Kb。

然后重新加载同一页面而不清除缓存，您仍然会在 FireBug 中看到相同数量的请求。

原因很简单。 该页面没有更改，并且仍然需要以前所需的所有相同资源。

不同之处在于，对于大多数请求，服务器返回 304 未修改状态，因此浏览器检查其缓存以查看是否已在本地存储了资源，在本例中，它是从上一个页面加载中获取的。 所以浏览器只是从本地缓存中拉取资源。

如果您查看 Fire Bug 窗口的底部，您将看到页面大小仍然相同 (195Kb)，但其中大部分（在我的例子中为 188Kb）是从本地缓存中提取的。

所以缓存确实起作用了，当我第二次点击 Google 时，我保存了 188Kb 的下载内容。

我相信您会在预加载图像时发现同样的情况。 请求仍然发出，但如果服务器返回状态 304，那么您将看到图像实际上只是从本地缓存而不是网络中提取。

因此，使用缓存的优点不是您会终止所有未来的资源请求，即仍然对网络进行 Uri 查找，而是如果可能的话，浏览器将从本地缓存中提取内容以满足内容的需求，而不是在网上跑来跑去寻找它。

Answer 3

您可能对“预加载”的概念感到困惑。 如果您的 HTML 中有一堆带有 的图像，则它们无法使用 Javascript 预加载，它们只是随页面一起加载。

使用 Javascript 预加载图像是指加载文档源中尚未存在的图像，然后稍后显示它们。 它们在页面首次呈现后加载。 它们被预加载，以便在使它们出现时消除/最小化加载时间，例如在鼠标悬停时更改图像时。

对于大多数应用程序，通常更好的做法是使用“CSS sprites”作为预加载的形式，而不是 Javascript。 所以对此应该有很多问题。

Answer 4

它只涉及创建一个新的 DOM 图像对象并设置 src 属性。 没什么聪明的，据我所知，它一直对我有用。

第二个“加载”萤火虫是否有可能向您显示它是否从缓存加载？

Answer 5

循环上的索引只是查找
在第一张图片中。 更改为使用
索引：

函数预加载(arrayOfImages) { 
      $(arrayOfImages).each(function(i){ // 注意参数 
          $('')[i].src = this;   // 注意我 
          //(new Image()).src = this; 
          警报（这个+'&&'+i++）； 

      }); 
  } 
  

编辑：回想起来，这是错误的，我可以看到您正在尝试创建图像元素。 我根本不明白为什么索引在那里，不需要有索引。 我认为该函数应该如下所示：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img/>').attr('src', this);
    });
}    

为了实例化它，为什么不这样做：

$(function () {    // Equivalent to $(document).ready()
    preload(myImages);
});

JavaScript 图像预加载之所以有效，是因为当创建包含图像的 DOM 元素时，会下载并缓存该图像。 即使在实际从 HTML 渲染图像时发出另一个请求，服务器也会发回 304（未更改），浏览器将简单地从其缓存中加载图像。

Paolo 建议使用以下表示法来创建图像对象：

var image = new Image();

虽然这可行，但符合 DOM 的方式是：

var image = document.createElement('img');
image.setAttribute('src', 'path/to/image.jpg');

这是在脚本中完成的方式，只不过它使用 jQuery 的 HTML 字符串文字语法来完成此操作。 此外，大多数现代浏览器通过简单地调用 DOM 标准方法来提供与 Image() 构造函数的兼容性。 例如，如果您打开 Google Chrome JavaScript 控制台并输入 Image，您将得到以下结果：

function Image() {
    return document.createElementNS('http://www.w3.org/1999/xhtml', 'img');
}

Chrome 仅使用本机 DOM 方法来创建图像元素。