载入大背景图片
Loading large background images
我最近偶然发现了几个网站，这些网站使用大型、高质量的图像作为背景图像。我喜欢这种外观，但显然我很关心加载时间。
对我来说，图像似乎是用 CSS 加载的。但是他们必须有另一种方式来做到这一点，因为没有加载时间。这可能很愚蠢，但我不认为它是服务器端，否则他们的图像 link 不会在 CSS 文档中，对吗？
如果能提供有关最佳做法的反馈，我将不胜感激。
谢谢。
在 html/css 中加载图像非常复杂。在您链接的页面中，根据文件大小，图像的质量实际上没有您想象的那么高。他们在根据背景给出错觉。
不过要加载图像，如果您 google 周围有很多技巧：
- 缓存是关键（不要多次加载）
- 获得尽可能小的文件
- 尽可能使用 sprite - 浏览器只有那么多并发连接
- 您展示的示例显示了一个隐藏下载时间的加载栏（请谨慎使用，根据我的经验，这是一把双刃剑）。
- 控制渲染顺序
- 延迟渲染
- 如果只需要支持html5/css3 checkout svg 文件。
希望对您有所帮助...不幸的是，您的问题没有神奇的答案，一切都与权衡和在您的具体示例中使用什么有关。
我猜您是在问这个问题，因为您对图片未加载 "after" 页面感到惊讶？
我最喜欢的防止 "FOUC"（Flash Of Unstyled 意图）的技巧是将此类图像进行 base-64 编码到您的 CSS 中。它实质上是将您的图像嵌入到 CSS 中，并且在下载整个 CSS 文件之前，浏览器不会呈现页面。
这会导致您的 CSS 文件变大，而 IE8 对文件大小有限制，但如果您有构建过程或像 LESS 这样的 CSS 预处理器，这是一个非常简单的解决方案。
正在 css 完成。他们使用图像作为背景，然后对其应用 background-size: cover;。在制作整页幻灯片时，我经常使用它。图像的质量取决于图像的分辨率。在本例中，它的宽度为 1600 像素。
我最近偶然发现了几个网站，这些网站使用大型、高质量的图像作为背景图像。我喜欢这种外观，但显然我很关心加载时间。
对我来说，图像似乎是用 CSS 加载的。但是他们必须有另一种方式来做到这一点，因为没有加载时间。这可能很愚蠢，但我不认为它是服务器端，否则他们的图像 link 不会在 CSS 文档中，对吗？
如果能提供有关最佳做法的反馈，我将不胜感激。
谢谢。
在 html/css 中加载图像非常复杂。在您链接的页面中，根据文件大小，图像的质量实际上没有您想象的那么高。他们在根据背景给出错觉。
不过要加载图像，如果您 google 周围有很多技巧：
- 缓存是关键（不要多次加载）
- 获得尽可能小的文件
- 尽可能使用 sprite - 浏览器只有那么多并发连接
- 您展示的示例显示了一个隐藏下载时间的加载栏（请谨慎使用，根据我的经验，这是一把双刃剑）。
- 控制渲染顺序
- 延迟渲染
- 如果只需要支持html5/css3 checkout svg 文件。
希望对您有所帮助...不幸的是，您的问题没有神奇的答案，一切都与权衡和在您的具体示例中使用什么有关。
我猜您是在问这个问题，因为您对图片未加载 "after" 页面感到惊讶？
我最喜欢的防止 "FOUC"（Flash Of Unstyled 意图）的技巧是将此类图像进行 base-64 编码到您的 CSS 中。它实质上是将您的图像嵌入到 CSS 中，并且在下载整个 CSS 文件之前，浏览器不会呈现页面。
这会导致您的 CSS 文件变大，而 IE8 对文件大小有限制，但如果您有构建过程或像 LESS 这样的 CSS 预处理器，这是一个非常简单的解决方案。
正在 css 完成。他们使用图像作为背景，然后对其应用 background-size: cover;。在制作整页幻灯片时，我经常使用它。图像的质量取决于图像的分辨率。在本例中，它的宽度为 1600 像素。