利用<img> -Tag

Question

加速CSS背景图像加载时间的优点/缺点我通常通过CSS大量使用CSS sprites和背景图像。

现在，使用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 sprites的有效方法吗？

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>