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

我在加载页面时存储在我们服务器上的一长串图像上调用它，我可以看到一长串的＆＃34; GET＆＃34;我的控制台中的请求似乎表明它确实正在预加载图像。稍后，当图像显示在动态生成的内容中时（如果重要的话使用jQuery），加载时会有延迟，我在控制台中看到另一个GET请求，状态为＆＃34; HTTP / 1.1 304 Not Modified＆＃34 ;.所以看起来像是再次加载图像而不是使用缓存版本。可能导致这种情况的原因是什么？

我确实在图像预加载之后，在图像显示之前发生了一些ajax调用，使用＆＃34; cache：false＆＃34;在他们 - 这是一个可能的原因？但是，这些ajax调用不会直接影响页面内容 - 它们只是用于获取数据库信息，而这反过来会影响页面内容。

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

Answer 1

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

您可以使用Charles

等代理验证此行为

Answer 2

我刚刚想出了解决这个问题的方法，似乎有效。

不是通过Javascript创建新图像然后分配它的src，您可以在css中定义一个元素，其中包含您想要预加载的背景图像，然后动态地将该元素附加到正文，如下所示：

CSS：

#preload {
    background: url('/image.jpeg') no-repeat -9999px -9999px;
}

Javascript（为简单起见，我使用了jQuery）：

jQuery(window).load(function() {
    jQuery('body').append('<div id="preload"></div>');
});

希望这有帮助。

图像预加载不起作用

2 个答案: