Javascript 加载大背景图像

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

下面是一个例子：

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

我希望能得到一些关于这方面最佳实践的反馈

---

谢谢。

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

不过，要加载图像，如果你在上面搜索，有很多技巧：

• 缓存是关键（不要多次加载）
• 获取尽可能小的文件大小
• 尽可能使用精灵-浏览器只有这么多并发连接
• 您展示的示例显示了一个隐藏下载时间的加载条（请谨慎使用，在我的经验中，这是一把双刃剑）
• 控件呈现顺序
• 延迟渲染
• 如果只需要支持html5/css3，就可以签出svg文件

---

希望这有助于。。。不幸的是，您的问题没有神奇的答案，这都是关于权衡和在您的具体示例中使用什么的问题。

我猜您是在问这个问题，因为您发现图像没有“在”页面之后加载令人惊讶

我最喜欢的防止“FOUC”（未格式化内容的Flash）的技巧是将这些图像编码到CSS中。它实质上是将图像嵌入到CSS中，在下载整个CSS文件之前，浏览器不会呈现页面

---

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

这是用CSS完成的。他们使用图像作为背景，然后应用

背景大小：封面到它。我经常在做整页幻灯片时使用这个。图像的质量取决于图像的分辨率。在本例中，它的宽度为1600px。
在我看来，它就像一张普通的图像。不过它优化得很好，只有300Kb。你是说黑白的“桥”吗？在宽带连接的桌面上，你的链接没有明显的加载时间，但在3G连接的手机上，这是非常重要的。我很确定这个图像只是一个图像，没有什么魔力。大约330kb，在宽带上可以忽略不计。这很有帮助。我只是觉得我疯了。谢谢你的回答！