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

Question

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

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

我在我面前看到了证据,但在网上找不到任何信息.这里和那里只是没有回答的论坛问题.

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

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

Answer 1

我正在挖掘,因为我正在研究类似的问题.

对此测试用例 + 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>to 设置为position:absolute(或fixed)并将其加载到较低的内容后面z-index.

解决方法3 - CSS3: 如果您不需要支持旧浏览器,请使用多个背景图像.

background-image: url('extremely_compressed.jpg'),url('high_quality.jpg');