javascript - 载入大背景图片

Question

我最近偶然发现了几个网站，这些网站使用大型、高质量的图像作为背景图像。我喜欢这种外观，但显然我很关心加载时间。

这是一个例子:http://bit.ly/1duLlYy

在我看来，图像似乎是用 CSS 加载的。但是他们必须有另一种方式来做到这一点，因为没有加载时间。这可能很愚蠢，但我不认为这是服务器端，否则图像链接不会在 CSS 文档中，对吗？

如果能提供有关最佳实践的反馈，我将不胜感激。

谢谢。

Answer 1

我猜您是在问这个问题，因为您对图像没有在页面“之后”加载感到惊讶吗？

我最喜欢的防止“FOUC”(Flash Of Unstyled ontent)的技巧是将此类图像进行 base-64 编码到您的 CSS 中。它本质上是将图像嵌入到 CSS 中，浏览器在下载整个 CSS 文件之前不会呈现页面。

这会导致你的 CSS 文件很大，而 IE8 对文件大小有限制，但如果你有一个构建过程或像 LESS 这样的 CSS 预处理器，这是一个非常简单的解决方案。