CSS背景-HTML图片后加载图片（涉及Javascript）答案

【问题标题】：CSS Background-Images Loading after HTML Images (Involves Javascript)CSS背景-HTML图片后加载图片（涉及Javascript）
【发布时间】：2010-04-02 19:15:34
【问题描述】：

我整理了一个快速的小型微型网站，您可以在 http://monterraauction.com 看到它。如果您没有超快速连接（并且没有缓存），最后要加载的项目是用于 CSS 图像文本替换的背景图像（主要是顶部的 h1#head，带有7kb 背景图片）。没有什么令人沮丧的，但它看起来有点尴尬。我问这个问题是出于好奇；）另外，请注意这发生在 Firefox 中，而不是 Chrome。

现在，在h1#head 下方，div#photo 中有一个 jquery.cycle.lite 驱动的幻灯片。在 HTML 标记中，每张幻灯片共有 13 个重图像文件。如果我删除除了第一张幻灯片之外的所有内容，那么问题就消失了！所以 CSS 背景图像是在……那些 HTML 图像完成之后加载的？但令人困惑的是：

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

我试过$('#photo img:last-child').load(function() { alert('Locked and Loaded!')});，但背景图像会在警报出现之前弹出一段时间，所以我假设它不会等到最后一张幻灯片加载完毕（诚然，我有点 JS 菜鸟，所以也许我只是做了一个错误的假设）。

我还尝试注释掉所有 jquery.cycle.lite 的东西，这样我就知道我没有任何 JS 操作 #photo 中的 DOM 元素，但这不是问题。我尝试将所有 JS 放在文档底部，就在 </body> 之前，但这不起作用。最后，我尝试关闭 javascript，当然 css 背景图像在 #photo 中的图像之前加载，所以它绝对是 JS 的东西（amirite？）

我想这里明显的解决方案是将幻灯片标记为 LINKS 而不是 IMG，并在 DOM 准备好后让 Javascript 插入这 12 个额外的幻灯片图像——没有 javascript 的用户无论如何都不需要下载额外的图像.但是，我又很好奇：

为什么从#photo 中删除多余的 HTML 图像可以解决问题？为什么在加载 HTML 图像之后显示 CSS 背景图像，即使 YSlow 说首先加载 css 背景图像？看看它是如何在 FF 而不是 Chrome 中发生的，这仅仅是浏览器的问题吗？

感谢你们能给我的任何见解！

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

（请注意，我的意思是您打算在解析时执行的脚本块，而不是像 jQuery(function() { ... }) 那样设置“页面就绪”处理程序的东西。）

【讨论】：

【解决方案2】：

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

http://www.freepichosting.com/graphic/thumbs/322782-2010-04-02-th.png

【讨论】：

啊，现在我查看我的网络面板（而不是 YSlow），它表明 CSS 背景图像确实在 HTML 图像之后加载（这与 YSlow 告诉我的相矛盾——或者响应时间在技术上与下载时间不同吗？）您使用的是 FF 3.6 吗？我想我应该注意到我仍在使用 3.5.8 来实现某些插件兼容性，不知道这是否会影响它。
啊，是的，我的User-Agent 是Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.2) Gecko/20100316 Firefox/3.6.2 GTB6 GTBA。另外，我相信“响应时间”是从对象请求到对象响应，而不是从页面请求到对象响应。