利用<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>