Question

我大量使用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精灵的有效方法吗？

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>

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

1 个答案: