HTML图像后加载CSS背景图像（涉及Javascript）

我创建了一个快速的微型站点，你可以在上面看到。如果您没有超高速连接，并且没有缓存任何内容，那么最后要加载的项目是主要用于CSS图像文本替换的背景图像，该图像位于顶部，具有7kb的背景图像。没什么让人衰弱的，但看起来有点尴尬。我问这个问题是出于好奇，而不是出于其他原因；另外，请注意，这发生在Firefox中，而不是Chrome中

现在，在h1head下面，我在divphoto中有一个jquery.cycle.lite支持的幻灯片。在HTML标记中，总共有13个沉重的图像文件组成了每个幻灯片。如果我除去第一张幻灯片以外的所有幻灯片，那么问题就消失了！那么CSS背景图像是在…那些HTML图像完成后加载的？但令人困惑的是：

我在YSlow中查看它…CSS背景图像的响应时间比照片中的所有幻灯片都要短。事实上，在所有JS文件完成加载之后。那为什么他们不先出现呢

我尝试了$'photo img:last child'.loadfunction{alert'Locked and Loaded！'；，但是背景图像会在警报出现之前弹出一段时间，所以我假设它不会等到最后一张幻灯片加载完毕。诚然，我有点像JS noob，所以可能我只是做了一个错误的假设

我还尝试注释所有jquery.cycle.lite内容，这样我就知道我没有任何JS操作照片中的DOM元素，但这不是问题所在。我之前尝试过将所有的JS放在文档的底部，但没有成功。最后，我尝试关闭javascript，当然css背景图像在照片中的图像之前加载，所以它肯定是JS的东西

我想这里最明显的解决方案是将幻灯片标记为链接，而不是img，并在DOM就绪后让Javascript插入这12个额外的幻灯片图像。没有Javascript的用户无论如何都不需要下载额外的图像。但我还是很好奇：

为什么从照片中删除额外的HTML图像可以解决这个问题？为什么CSS背景图像会在HTML图像加载后显示，即使YSlow说CSS背景图像是先加载的？从FF而非Chrome中的情况来看，这仅仅是一个浏览器问题吗

---

我很感激你们能给我的任何见解

如果在顶部插入一个小脚本块以预加载背景图像，会发生什么情况？只需创建新的图像对象并设置源属性。我不是说这一定是个好主意，但这可能是一个有趣的实验

---

请注意，我指的是您打算在解析时执行的脚本块，而不是设置页面就绪处理程序la jQueryfunction{…}。

如果在顶部插入一个小脚本块以预加载背景图像，会发生什么？只需创建新的图像对象并设置源属性。我不是说这一定是个好主意，但这可能是一个有趣的实验

---

请注意，我指的是您打算在解析时执行的脚本块，而不是用来设置页面就绪处理程序（即la jQueryfunction{…}）。

好吧，我没有看到这个问题，尽管当我查看HTML时，所有的都在那里。以下是我尝试复制的网络面板：

---

嗯，我没有看到这个问题，即使当我看到HTML时，所有的s都在那里。以下是我尝试复制的网络面板：

---

啊，现在我看我的网络面板而不是YSlow，它表明css背景图像确实是在HTML图像之后加载的，这与YSlow告诉我的相反，或者说响应时间在技术上与下载时间不同？您使用的是FF 3.6吗？我想我应该注意到我仍然在使用3.5.8来实现插件兼容性，不知道这是否会影响它。啊，是的，我的用户代理是Mozilla/5.0 Windows；Uwindowsnt5.1；恩美；rv:1.9.2.2 Gecko/20100316 Firefox/3.6.2 GTB6 GTBA。另外，我相信响应时间是从对象请求到对象响应的时间，而不是从页面请求到对象响应的时间。啊，现在我看到的是我的网络面板，而不是YSlow，这表明css背景图像确实是在HTML图像之后加载的，这与YSlow告诉我的相反，或者说响应时间在技术上与下载时间不同？您使用的是FF 3.6吗？我想我应该注意到我仍然在使用3.5.8来实现插件兼容性，不知道这是否会影响它。啊，是的，我的用户代理是Mozilla/5.0 Windows；Uwindowsnt5.1；恩美；rv:1.9.2.2 Gecko/20100316 Firefox/3.6.2 GTB6 GTBA。另外，我相信响应时间是从对象请求到对象响应，而不是从页面请求到对象响应。