使用 <img>-Tag 加快 CSS 背景图像加载时间的优点/缺点答案

【问题标题】：Pros/Cons for accelerating load times of CSS background images using an <img>-Tag使用 <img>-Tag 加快 CSS 背景图像加载时间的优点/缺点
【发布时间】：2014-04-10 03:29:06
【问题描述】：

我通常大量使用 CSS 精灵和背景图像 - 全部通过 CSS。

现在，使用 Firebug 的网络面板，我看到这些 CSS 背景图像的加载只有在这些步骤之后才开始：

1) HTML 文档的加载和解析

2) 加载 CSS 文件

看起来像这样：http://www.umdiewelt.de/tmp/network_withoutIMG.JPG

所以我加入了以下内容，看看会发生什么：

<img src="http://cdn.umdiewelt.de/images/layout/c_bgBody.jpg" style="display:none" />
<img src="http://cdn.umdiewelt.de/images/layout/c_bgHeader.jpg" style="display:none" />
<img src="http://cdn.umdiewelt.de/images/c_miscSpriteScreenBasic.png" style="display:none" />

注意，图像设置为 display:none。

现在这些下载更早开始了：http://www.umdiewelt.de/tmp/network_withIMG.JPG

这是好的编码习惯还是只是废话？这肯定是未使用 HTML 的开销，但它是预加载 CSS sprite 的有效方法吗？

【问题讨论】：

标签： css image background sprite preloading

【解决方案1】：

本文指出了一些预加载图像的有效方法，其中我将介绍第二种方法的第一种变体。

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

在您的情况下，您可以使用它（从文章中的示例修改以适合用例）

<div class="hidden">
    <script type="text/javascript">
        <!--//--><![CDATA[//><!--
            var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
            preload(
                "http://cdn.umdiewelt.de/images/layout/c_bgBody.jpg",
                "http://cdn.umdiewelt.de/images/layout/c_bgHeader.jpg",
                "http://cdn.umdiewelt.de/images/c_miscSpriteScreenBasic.png"
            )
        //--><!]]>
    </script>
</div>

【讨论】：

感谢您的回答，读起来很有趣！但它并没有真正解决我的问题——只是把它带到了另一个层次。我不需要预加载文件以稍后使用它们，而是尽快使用它们。但我认为我的问题自己解决了：我在两种方法之间进行了一些比较：结果是，是的，文件下载开始得更早，但由于我不太明白的原因，整个页面加载时间大致相同： -/ 这是一篇我觉得非常有帮助的文章：softwareishard.com/blog/firebug/…