我正在使用 CSS background 属性在我的网站上放置一个大的、不重复的背景图像。由于图像非常大，因此某些连接需要很长时间才能呈现图像。
这是我的 CSS：
#wrapper {
background: url('large-image.jpg) no-repeat center center;
}
我已经做了以下操作来优化网络图像：
- 将其降低到不影响质量的最低分辨率
- 将图像类型从 PNG 更改为 JPEG
- 设置了页面样式，以便即使没有背景图像也能阅读内容
我的问题：为了进一步优化图像加载时间，如果我将background标签放在样式表的底部会有所不同吗？或者这样做的影响可以忽略不计？
我倾向于按HTML的层次结构对CSS进行排序，因此#wrapper样式位于样式表的顶部。当用户的连接速度较慢时，样式表中属性的顺序是否会对加载时间产生明显影响？
样式表中的位置不会影响加载时间。
您可以做的是在某些情况下防止它加载，例如在手机上。
供参考：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
这些媒体查询不是万无一失的，但它们会捕获很多较慢的情况，通常是移动设备。 另一方面，如果有人在桌面上使用 56k 调制解调器，我只是不知道该怎么办（也许他们已经习惯了）。
如果你愿意，你可以使用 Jquery 和 waitforimages 来确保它在所有其他图像之后加载。
可能影响感知加载时间的是初始#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中剥离muich冗余数据（我目前在使用他们的服务时遇到间歇性问题，但它在几次尝试后就可以工作，或者您可以使用OptiPNG，但imo为单个图像设置和配置它会太费力）
更新：
有人建议你等待 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实例，并且不会干扰选择器的特殊性。您最终仍然会短暂闪烁无样式的内容（在触发处理程序并应用样式之前），所以我不提倡这种方法。
请参阅上一个问题。 CSS 样式表将在页面显示之前完全加载和评估，因此背景图像 CSS 在样式表中的位置无关紧要。
如果您希望图像仅在显示其余内容后加载，则可以使用 jQuery：
$(window).load(function(){
$("#wrapper").css({'background-image':'url("large-image.jpg")', 'background-repeat':'no-repeat', 'background-position':'center center'});
});