在同一页面加载时，不会从缓存中检索 Firefox 中的预加载图像

Question

在某些情况下，我正在网站主页上运行一个脚本来交换计时器上的背景图像。我们决定最好尝试实现图像的预加载，这会在 Firefox 中提示以下问题：

在第一个页面加载时预加载图像不会阻止浏览器再次从原始来源而不是缓存加载图像。奇怪的是，刷新页面会成功地从缓存中加载图像。

页面加载时运行的 JavaScript 获取所有图像 URL，并尝试通过调用 (new Image()).src = 'http:// ...' 来预加载它们；每一个。

检查页面加载显示图像将在页面加载时加载，但当幻灯片显示时，图像也会再次加载。

测试图片链接（SO 信誉限制）：http://i.stack.imgur.com/E9KLM.png

在图像中，图像 -66.png、-21.png、-63.png 和 -83.png 是从 JavaScript 预加载的，但是当滑块显示该幻灯片时会再次请求。

还有一点奇怪的是，底部的图片看起来像是在页面创建后就在排队等待加载。也许是因为这优先于文档准备好后加载的脚本？

最后，如果我要刷新页面并跳转到预先加载了图像但从未显示的幻灯片，则显示它是从缓存中加载的，就像它原本应该的那样。

我的理论是，原始背景图像可能会在页面首次加载时声明为需要从服务器加载，但直到幻灯片显示时才实际加载。在文档准备好时，当 javascript 预加载图像时，它们尚未缓存，因此需要从服务器加载。然后显示一张幻灯片，浏览器告诉该图像需要按照最初声明的方式加载。

有谁知道为什么会出现这种情况？如果有，有什么解决办法吗？

我的想法是将图像 URL 添加为 data-url 属性，然后让 javascript 预加载它们并将它们添加为背景图像，但我尚未对此进行测试。

Answer 1

对于那些感兴趣的人，我们无法找到完美的解决方案。

然而，我们确实注意到，图像会根据它们的大小再次被拉出。图片尺寸越大，当图片显示给用户时，图片越有可能没有从缓存中获取。

我们通过进一步压缩我们的背景图像，然后大大限制了在第一页加载时预加载的图像数量，从而半解决了这个问题。我们发现这两个步骤大大增加了在需要时通过缓存拉入的图像的变化。总体而言，它还节省了更多带宽并大大缩短了页面加载时间。