譯自： Creating a CSS Image Preloader
中文：純CSS圖片預先載入
版權所有轉載請註明出處，多謝！
有很多種方法來實現圖片的預先加載，通常大部分使用Javascript讓事情滾動。不要再受Javascript預載的束縛了吧，用CSS你就可以毫不麻煩的預載你的圖片。
為什麼要使用預載
為什麼會考慮使用預載呢？你是否曾經有個網站，在那個網站你要滾動你的導航然後有個延遲直到圖片被加載完……嘿嘿。預載將在這方面幫助你。它將在頁面加載的時候加載那些圖片並將其存儲在瀏覽器的快取裡面。這樣當使用者滾動導航的時候，很漂亮而且流暢，沒有延遲。
CSS程式碼
這個概念就是寫一個CSS樣式設定一批背景圖片，然後將其隱藏，這樣你就看不到那些圖片了。那些背景圖片就是你想預載的圖片。
這是一個例子:
#preloader {
/* Images you want to preload*/
background-image: url(image1.jpg);
background-image: url(image2.jpg);
background-image: url(image3.jpg);
width: 0px;
height: 0px;
display: inline;
}
這只是一種隱藏你的圖片的方法，所以它們不會被顯示。我也看到有人使用非常大的background-position值將圖片推出去。或給一個負的margin值。有很多中方法隱藏你要預載的圖片，選擇最適合你的吧。
另一種情況
有巨大的圖片需要下載的情況並不會經常發生，如果你採用通常的做法，提供某種圖片正在加載的表示。這裡是一些CSS，可以給使用者一個提示：圖片正在載入。
img { background: url(loadingHourGlass.gif) no-repeat 50% 50%; }
gif圖片可以是動畫，類似mac上的沙灘球或是PC上的沙漏之類的東東。採用一個動畫吧，這樣使用者就會知道事情正在進行中。
結論
當預載有意義的時候做你最好的吧，你的用戶將以此喜歡上你。事實上他們可能沒有註意到，但是這是一件好事情，如果他們注意到你的網站正在加載，那可能真的是太慢了。
關於實例一的特別說明
首先多謝評論中網友提出的問題，翻譯完這篇文章之後，考慮到一個css規則中多次定義同一個屬性，瀏覽器一般只會處理最後一個，決定有必要做一下檢驗，但是沒有意識到事情的嚴重性，所以沒有及時處理，以至於可能會造成一些誤解。
根據我的測試，大部分瀏覽器都是只載入了最後一個圖片，前兩個圖片被忽略了。但在webkit核心的瀏覽器中，例如chrome，會預先載入這三個圖片。實例一為我們提供了一個很好的處理問題的思路，但是對於在同一個css樣式中加載多個圖片的用法，可能還要等css3的多背景圖片屬性被更多的瀏覽器支持才行。
PS:我來解釋一下這個demo吧。可能原作者沒有考慮太多，只是想示範一下預先載入的效果，所以這個demo頁面做的有些簡單：他只是將預載的圖片用於a:hover的背景了，這樣在滑鼠經過的時候，就可以無閃動的現實那張圖片。嗯，也就是文中的第二種用法…