7

background我正在使用 CSS属性在我的网站上放置一个大的、非重复的背景图像。由于图像太大，一些连接渲染图像需要很长时间。

这是我的CSS：

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

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

  • 将其降低到不影响质量的最低分辨率
  • 将图像类型从 PNG 更改为 JPEG
  • 对页面进行样式设置，即使没有背景图像也可以阅读内容

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

我倾向于按照我的 HTML 的层次结构来排序我的 CSS，所以#wrapper样式位于我的样式表的顶部。当用户的连接速度较慢时，样式表中的属性顺序是否会对加载时间产生显着影响？

4

3 回答 3

4

样式表中的位置不会影响加载时间。

不过，您可以做的是防止它在某些情况下加载，例如在手机上。

供参考： http ://css-tricks.com/snippets/css/media-queries-for-standard-devices/

这些媒体查询不是防故障的，但它们会捕获很多速度较慢的情况，通常是移动设备。另一方面，如果有人使用 56k 调制解调器和桌面，我只是不知道该怎么办（也许他们已经习惯了）。

如果您愿意，您可以使用 Jquery 和waitforimages来确保它在所有其他图像之后加载。

于 2012-08-06T21:50:49.507 回答
3

可能会影响感知加载时间的是初始#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但是 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，并且不会干扰选择器的特异性。您仍然会得到一个短暂的无样式内容（在触发处理程序并应用样式之前），所以我不提倡这种方法。

于 2012-08-06T22:39:02.157 回答
1

请参阅上一个问题。CSS 样式表将在页面显示之前完全加载和评估，因此背景图像 CSS 的位置在样式表中无关紧要。

如果您希望仅在显示其余内容后才加载图像，您可以使用 jQuery：

$(window).load(function(){
    $("#wrapper").css({'background-image':'url("large-image.jpg")', 'background-repeat':'no-repeat', 'background-position':'center center'});
});
于 2012-08-06T21:46:45.690 回答