图像预加载不适用于 FireFox 中的图像答案

【问题标题】：Image preloading isn't working for images in FireFox图像预加载不适用于 FireFox 中的图像
【发布时间】：2009-12-15 00:47:32
【问题描述】：

我正在动态切换背景图像。自然，它们需要预先加载才能及时显示。我正在预加载它们，能够在加载图像时跟随 FireBug。当背景图像切换时，我在 FireBug 中再次看到图像下载。

这是我的网址：http://www.morganpackard.com/siteRoot/

奇怪的是，如果我重新加载页面，一切都会按预期进行。我正在采取的步骤如下：

1) 清除 FireFox 缓存 2）重新加载页面图像加载缓慢，显然既没有预加载也没有缓存。每次进行图像交换时，图像都会再次下载。 3) 现在重新加载页面而不清除缓存图像立即加载和交换，一切正常。

所以看起来我必须在 FireFox 从缓存中读取图像之前重新加载。这很古怪。有什么想法吗？

注意：我的图片非常庞大。当然，我会压缩它们，但要先对这些预加载进行排序。

【问题讨论】：

标签： javascript image image-preloader

【解决方案1】：

我没有阅读您的代码，但是要使预加载工作，您必须将图像添加到文档 DOM，否则可能会被垃圾回收。

【讨论】：

嗯。但是经典的 JS 预加载只是创建 JS 图像对象，没有将它们添加到 DOM 中。为了确保，我尝试将我的图像逐字附加到 dom 中，使它们可见。所以我在屏幕上看到了 ImageA，显然是在 DOM 中加载的，但是当我将背景设置为 ImageA 时，再次下载时会出现暂停。
我认为尼古拉斯是正确的；我通常将预加载的图像添加到从视图中删除的 DOM 元素中。
当你设置你的背景图片时，你确定你使用的url与你刚刚预加载的图片相同吗？您可以尝试使用 image.src（因为图像是您预加载的），也请确保在加载图像时这样做。否则我不知道。
谢谢大家，是的，您建议的所有内容都可以查看。我在原始问题中添加了一条评论，概述了一个额外的奇怪之处——我的图像在我重新加载后从缓存中正确读取。

【解决方案2】：

使用 HttpFox 检查，我没有看到更多的 http 请求 - 当点击时 - 在初始加载后为您的背景图像。如果我点击“刷新”，则重新加载图像。我认为这是正确的，也是您所期望的。但是请注意，在页面刷新时重新加载页面及其资产（如图像、css 等）取决于响应标头和浏览器/插件工具中指定的任何覆盖。看一下 pragma：no-cache 和 W3C Cache-Control（第 14.9 节）

编辑：打开萤火虫后，当我点击周围时，我正在看到重新加载。这大概是 Firebug 的人工制品。关闭萤火虫，你不会有重新加载。

【讨论】：

我已经关闭了 FireBug，图像仍然加载缓慢。在 Safari 中按预期工作，但在 Firefox 中无法正常工作。