6

关于渐进式 JPG 背景的快速问题，如果有人知道的话。

如果将 JPEG 设置为 CSS 背景，Firefox 似乎会忽略它们的“渐进性”，并等待图像完全加载直到显示。我让 Chrome 和 IE 逐步加载背景图像，但 Firefox 只是以全质量弹出它们。

我看到了摆在我面前的证据，但在网上几乎没有找到关于它的信息。只是在这里和那里没有回答的论坛问题。

有人知道这是什么一回事吗？这是 Mozilla 知道的错误还是发生了什么？

编辑：由easwee http://sample.easwee.net/jpgProgressive/index.html提供的测试用例

4

2 回答 2

10

因为我目前正在处理类似的问题，所以我进行了深入研究。

对此测试用例的个人测试结果+ 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:absolutefixedz-index

Wordaround 3 - CSS3： 如果您不需要支持旧浏览器，请使用多个背景图像。

background-image: url('extremely_compressed.jpg'),url('high_quality.jpg');
于 2014-02-18T11:58:52.280 回答
-1

您是否尝试过使用 jquery 插件？有一个类似的问题，我希望延迟加载以改善加载时间，因此使用 jquery 加载图像并覆盖浏览器。

快速搜索后找到了这个：

http://yuilibrary.com/yui/docs/imageloader/

于 2014-02-18T11:54:36.167 回答