javascript - 加载大背景图像

Question

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

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

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

如果您能提供一些有关这方面最佳实践的反馈，我将不胜感激。

谢谢。

Answer 1

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

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

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