加载大背景图片答案

【问题标题】：Loading large background images加载大背景图片
【发布时间】：2015-08-24 23:02:24
【问题描述】：

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

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

我很感谢您对此最佳做法的一些反馈。

谢谢。

【问题讨论】：

对我来说它看起来像一个普通的图像。不过它经过了很好的优化，只有 ~300Kb。
你说的是黑白“桥”吗？
您的链接在具有宽带连接的台式机上没有明显的加载时间，但在具有 3G 连接的移动设备上却非常显着。我很确定图像只是图像，那里没有魔法。它约为 330kb，在宽带上可以忽略不计。

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

不过，要加载图片，如果你用谷歌搜索的话，会有很多技巧：

希望对您有所帮助...不幸的是，您的问题没有一个神奇的答案，这完全是关于权衡以及在您的具体示例中使用什么。

【讨论】：

【解决方案3】：

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

【讨论】：