在Firefox中的Progressive JPG背景图像故障

问题描述

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

看起来如果Firefox设置为CSS背景，Firefox会忽略JPEG的渐进性，并等到图像完全加载后才显示。我已经Chrome和IE逐步加载背景图片，但是Firefox只是以完整的质量弹出它们。

我看到我面前的证据，没有在线信息。只是没有回答论坛的问题在这里和那里。

有人知道吗？

测试用例由 easwee 提供 a href =http://sample.easwee.net/jpgProgressive/index.html =nofollow> http://sample.easwee.net/jpgProgressive/index.html

解决方案

我开始挖掘，因为我目前正在开发一个类似的问题。

此 + Fiddler 2模拟慢速调制解调器速度：

 为HTML< img> as CSS background 
 Firefox（ver 25.0.1）不支持
 Chrome（ver 32.0.1700.107 m）works works 
 Safari（Windows 5.1.7）不支持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
如果您不需要支持旧的浏览器，请使用多个背景图片。

p>

  background-image：url（'extremely_compressed.jpg'），url（'high_quality.jpg'）; 
  

Quick question on progressive JPG backgrounds, if anyone knows.

It appears that Firefox ignores the "progressiveness" of JPEGs if they are set as CSS backgrounds and waits until the image is fully loaded until displaying. I have Chrome and IE loading the background images progressively but Firefox just pops them in at full quality.

I'm seeing the proof in front of me , but finding little to no info on it online. Just unanswered forum questions here and there.

Anyone know anything about this? Is it a bug Mozilla know about or what is going on?

Edit: Test case provided by easwee http://sample.easwee.net/jpgProgressive/index.html

解决方案

I went digging in since I am working on a similar problem at the moment.

Results from personal tests on this test case + Fiddler 2 to simulate slow modem speed:

                                 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

Seems to me from the tests (and from an extensive web search) that the only browser that currently supports progressive background images in CSS is Chrome.

Workaround:A nice workaround I've been using in cases where the image had to be visible before it finished loading the full size, is to load an extremely compressed image under the high resolution image. So you have the compressed graphic under the element until the full resolution graphic loads over it.

<div style="background:url(extremely_compressed.jpg);">
    <div style="background:url(high_quality.jpg);">
    </div>
</div>

Workaround 2:Since Firefox does support progressive loading on <img> tag, you could try setting the <img> to position:absolute (or fixed) and have it load behind the content with a lower z-index.

Wordaround 3 - CSS3:Use multiple background images if you don't need to support old browsers.

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

这篇关于在Firefox中的Progressive JPG背景图像故障的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！