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

Question

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

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

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

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

测试图像链接(SO 信誉限制):/image/E9KLM.png

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

同样奇怪的是，底部图像看起来像是自页面创建以来就已排队等待加载。也许是因为这优先于文档准备好后加载的脚本？

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

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

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

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

Answer 1

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

但是，我们确实注意到图像会根据其大小再次被拉取。图像尺寸越大，向用户显示图像时越有可能未从缓存中获取图像。

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