关于渐进式 JPG 背景的快速问题，如果有人知道的话。
如果 JPEG 被设置为 CSS 背景，Firefox 似乎会忽略它们的“渐进性”，并等待图像完全加载直到显示。我让 Chrome 和 IE 逐步加载背景图像，但 Firefox 只是以全质量弹出它们。
我看到了摆在我面前的证据，但在网上几乎找不到相关信息。只是在这里和那里没有回答的论坛问题。
有人知道吗？这是 Mozilla 知道的错误还是发生了什么？
编辑：测试用例由easwee http://sample.easwee.net/jpgProgressive/index.html
提供【问题讨论】：
标签： css firefox background-image jpeg progressive
因为我目前正在处理类似的问题，所以我进行了深入研究。
对此test case + Fiddler 2 的个人测试结果，用于模拟慢速调制解调器速度：
as HTML <img> as CSS background
Firefox (ver 25.0.1) works no support
Chrome (ver 32.0.1700.107 m) works works
Safari (windows 5.1.7) no support no support
在我看来，从测试（以及广泛的网络搜索）来看，目前唯一支持 CSS 中渐进式背景图像的浏览器是 Chrome。
解决方法： 如果图像在完成加载完整尺寸之前必须可见，我一直在使用的一个很好的解决方法是在高分辨率图像下加载一个极度压缩的图像。因此，您在元素下拥有压缩图形，直到在其上加载全分辨率图形。
<div style="background:url(extremely_compressed.jpg);">
<div style="background:url(high_quality.jpg);">
</div>
</div>
解决方法 2：
由于 Firefox 确实支持在<img> 标签上进行渐进式加载，您可以尝试将<img> 设置为position:absolute（或fixed）并让它加载到具有较低z-index 的内容后面。
Wordaround 3 - CSS3： 如果您不需要支持旧浏览器，请使用多个背景图片。
background-image: url('extremely_compressed.jpg'),url('high_quality.jpg');
【讨论】：
<html> 上加载压缩背景，而不是在 <body> 上加载完整的背景。
<div style="width:1000px;height:686px;background-image: url('http://easwee.net/code-samples/jpgProgressive/progressive.jpg'),url('progressive.jpg');"></div> 显示我的本地低分辨率版本，直到另一个完成，所以请求是平行的。 standard says 代理可以很聪明，不会加载隐藏在不透明图像后面的图像，尽管
您是否尝试过使用 jquery 插件？有一个类似的问题，我希望延迟加载以缩短加载时间，因此使用 jquery 加载图像并覆盖浏览器。
快速搜索后发现：
【讨论】：