【问题标题】:Progressive JPG background image trouble in FirefoxFirefox 中的渐进式 JPG 背景图像问题
【发布时间】:2026-01-17 04:25:01
【问题描述】:

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

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

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

有人知道吗?这是 Mozilla 知道的错误还是发生了什么?

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

提供

【问题讨论】:

    标签: css firefox background-image jpeg progressive


    【解决方案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 确实支持在&lt;img&gt; 标签上进行渐进式加载,您可以尝试将&lt;img&gt; 设置为position:absolute(或fixed)并让它加载到具有较低z-index 的内容后面。

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

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

    【讨论】:

    • 只是好奇:根据 CSS3 的多个背景图像中的“下方”是否相同? (诚​​然,我从没想过那里的加载顺序。)
    • @UlrichSchwarz - 不 - 我的意思是像两个嵌套的 div - 或者在 &lt;html&gt; 上加载压缩背景,而不是在 &lt;body&gt; 上加载完整的背景。
    • 是的,解决方法 2 闪过我的脑海,很可能是我必须在这里采用的解决方案。你知道这是否已经被 FF 团队“窃听”了吗?我找不到任何东西。
    • @easwee:仅供参考,为此使用多个背景似乎可行(在 FF 24 和 Opera 12.15 中):&lt;div style="width:1000px;height:686px;background-image: url('http://easwee.net/code-samples/jpgProgressive/progressive.jpg'),url('progressive.jpg');"&gt;&lt;/div&gt; 显示我的本地低分辨率版本,直到另一个完成,所以请求是平行的。 standard says 代理可以很聪明,不会加载隐藏在不透明图像后面的图像,尽管
    • 我希望其他浏览器在这个功能上赶上 Chrome,但我会接受这个作为答案:)
    【解决方案2】:

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

    快速搜索后发现:

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

    【讨论】:

    • (我猜逐步加载背后的原因是为了更好的加载时间)
    • (正确^^) 希望如果有解决方案,也不需要插件或库。
    • 问题的重点是找出渐进式图像加载是否在 css 中工作。在这种情况下,图像加载器对您没有任何好处,因为图像仍然需要加载并且在此之前是不可见的。