Question

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

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

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

有人对此有所了解吗？这是Mozilla知道的或者发生了什么的错误吗？

修改： easwee提供的测试用例 http://sample.easwee.net/jpgProgressive/index.html

Answer 1

我正在挖掘，因为我现在正在处理类似的问题。

对此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 background-image: url('extremely_compressed.jpg'),url('high_quality.jpg'); 1}}。

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

{{1}}

Answer 2

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

快速搜索后找到了这个：

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

Firefox中的渐进式JPEG背景图像问题

2 个答案: