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

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

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

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

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

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

解决方法

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

这个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>定位：绝对(或固定)并使其在具有较低z-index的内容后面加载.

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

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

原文地址：https://www.jb51.cc/css/214077.html