javascript - 图像预加载不起作用

Question

我写了(好吧，复制了)一个 Javascript 图像预加载函数，它似乎在我的页面加载时成功地预加载了我的图像，但是当页面实际需要显示图像时，有一个延迟，在此期间它显然会再次加载它们，破坏了预加载的目的。此行为的可能原因和修复方法？

我试过但未能创建可重现的代码，所以我猜这是因为我整个项目的复杂性。这是我正在使用的图像预加载功能:

function preload(sources)
{
  var images = [];
  for (i = 0, length = sources.length; i < length; ++i) {
    images[i] = new Image();
    images[i].src = sources[i];
  }
}

当页面加载时，我对存储在我们服务器上的一长串图像调用此方法，我可以在我的控制台中看到一长串“GET”请求，这似乎表明它确实在预加载图像。稍后，当图像显示在动态生成的内容中时(如果重要，则使用 jQuery)，加载它们时会出现延迟，我在控制台中看到另一个 GET 请求，状态为“HTTP/1.1 304 Not Modified”。所以看起来图像正在再次加载而不是使用缓存版本。可能是什么原因造成的？

我确实在图像预加载之后、图像显示之前发生了一些 ajax 调用，其中包含“cache: false”——这可能是原因吗？但是，这些 ajax 调用不会直接影响页面内容 - 它们只是用于获取数据库信息，进而影响页面内容。

顺便说一下，我正在使用 Firefox 进行测试。我在某处读到 Chrome 有时会发送请求以查看缓存的图像是否已被修改，但这应该不是 Firefox 的问题。

Answer 1

关闭 Firebug，您的图像将不会被加载两次。如果您打开了 Firebug ，您预加载的图像将不会被缓存。

您可以使用类似 Charles 的代理来验证此行为