css - 使用 <img> 标签加速 CSS 背景图像加载时间的优缺点

Question

一般情况下，我大量使用 CSS Sprite 和背景图像 - 全部通过 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" />

请注意，图像设置为显示:无。

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

这是良好的编码习惯还是垃圾？这当然是未使用的 HTML 的开销，但它是预加载 CSS Sprite 的有效方法吗？

Answer 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>