加载大背景图片

Question

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

以下是一个例子：http://bit.ly/1duLlYy

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

我很欣赏一些关于最佳做法的反馈。

感谢。

Answer 1

我认为你是在问这个问题，因为你发现图像没有加载到“页面后面”这令人惊讶吗？

我最喜欢的防止“FOUC”（Flash Of Unstyled ontent）的技巧是将这样的图像编码到你的CSS中。它实际上是将您的图像嵌入到CSS中，并且在下载整个CSS文件之前，浏览器不会呈现页面。

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

Answer 2

在html / css中加载图像非常复杂。在您链接的页面中，图像实际上并不像您根据文件大小那样高质量。他们根据背景给出了幻觉。

要加载图片，如果你谷歌上面有很多技巧：

• 缓存是关键（不要多次加载）
• 获取最小的文件大小
• 尽可能使用精灵 - 浏览器只有很多并发连接
• 你展示的例子显示了一个加载栏，它隐藏了下载时间（根据我的经验，这是一个双刃剑）。
• 控制渲染顺序
• 延迟渲染
• 如果只需要支持html5 / css3 checkout svg文件。

希望有所帮助......遗憾的是，对于您的问题没有神奇的答案，所有这些都是关于权衡和在您的具体示例中使用的内容。

Answer 3

这是用css完成的。他们使用图像作为背景，然后将background-size: cover;应用于它。我在做整页幻灯片时经常使用它。图像的质量取决于图像的分辨率。在这种情况下，它的宽度为1600px。