样式表中背景图像属性的最有效位置

Question

我使用CSS background属性在我的网站上放置一个大的,不重复的背景图像.由于图像太大,某些连接需要很长时间才能渲染图像.

这是我的CSS:

#wrapper {
    background: url('large-image.jpg) no-repeat center center;
}

我已经完成以下操作来优化网络图像:

我的问题:为了进一步优化图像加载时间,如果我将background标签放在样式表的底部会有所不同吗？或者这种影响可以忽略不计？

我倾向于按照HTML的层次结构来命令我的CSS,因此#wrapper样式位于我的样式表的顶部.样式表中的属性顺序是否会在用户连接速度较慢时对加载时间产生明显影响？

Answer 1

可能影响感知加载时间的是初始#wrapper可用性 - 即，如果在初始加载时它不是页面的一部分并且是用 JS 添加的，则背景图像将不会开始加载 - 但我怀疑这是否是一种常见情况。

背景图像加载不会影响 domready 处理程序，但是如果您想加快后台可用性，您可以尝试以下操作：

#wrapper {
    background: url(large-image.png) no-repeat center center,
                url(small-image.png) no-repeat center center;
}

来自MDN：

使用 CSS3，您可以将多个背景应用于元素。这些背景相互层叠，您提供的第一个背景位于顶部，最后一个背景列在后面。只有最后一个背景可以包含背景颜色。

这样做的目的是有效地允许您加载较低分辨率的图像作为背景的底层，而昂贵的高分辨率图像仍在加载。还记得过去的美好时光lowsrc吗？这就是我们正在模拟的行为。请注意，低分辨率和高分辨率图像下载同时开始，因此仅当大图像确实大得难以忍受时才使用此功能。

另外：你说你已经优化了图像；我仍然建议你尝试Yahoo SmushIt，你会惊讶地发现可以从 PNG 中去除大量冗余数据而不损失质量（我目前在使用他们的服务时遇到间歇性问题，但经过几次尝试后它可以工作，或者你可以使用OptiPNG但在我看来，为单个图像设置和配置会花费太多精力）

更新：

建议您等待 domready 启动并使用添加您的样式$("#wrapper").css(...);。它的作用是向元素添加内联样式，这会 1) 干扰选择器特异性 2) 仅适用于这个特定实例#wrapper（如果它是来自服务器的 ajax 内容的一部分，则不好）。

您也可以在运行时添加新的 css 规则：

$('head').append('<style type="text/css">#wrapper {background: url(large-image.jpg) no-repeat center center;}</style>');

这将被有机地添加到文档样式表中，并应用于的所有未来实例#wrapper，并且不会干扰选择器的特异性。您最终仍然会看到短暂的无样式内容（在处理程序被触发并应用样式之前），所以我不提倡这种方法。