[CSS教學] 轉載-純CSS圖片預加載

譯自：Creating a CSS Image Preloader

有很多種方法來實現圖片的預加載，通常大部分使用Javascript讓事情滾動。不要再受Javascript預載的束縛了吧，用CSS你就可以毫不麻煩的預載你的圖片。

為什麼使用預載

你為什麼會考慮使用預載呢？你是否曾有個網站，在那個網站你要滾動你的導航然後有個延遲直到圖片被加載完……嘿嘿。預載將在這方面幫助你。它將在頁面加載的時候加載那些圖片並將其存儲在瀏覽器的緩存裡面。這樣當用戶滾動導航的時候，很漂亮而且流暢，沒有延遲。

CSS代碼

這個概念就是寫一個CSS樣式設置一批背景圖片，然後將其隱藏，這樣你就看不到那些圖片了。那些背景圖片就是你想預載的圖片。

這是一個例子:

1. #preloader {
   
2. /* Images you want to preload*/
   
3. background-image: url(image1.jpg);
   
4. background-image: url(image2.jpg);
   
5. background-image: url(image3.jpg);
   
6. width: 0px;
   
7. height: 0px;
   
8. display: inline;
   
9. }

複製代碼

這只是一種隱藏你的圖片的方法，所以它們不會被顯示。我也見到有人使用非常大的background-position值將圖片推出去。或者給一個負的margin值。有很多中方法隱藏你要預載的圖片，選擇最適合你的吧。

另一種情況

有巨大的圖片需要下載的情況並不會經常發生，如果你採用通常的做法，提供某種圖片正在加載的表示。這裡是一些CSS，可以給用戶一個提示：圖片正在加載。

1. img { background: url(loadingHourGlass.gif) no-repeat 50% 50%; }

複製代碼

gif圖片可以是動畫，類似於mac上的沙灘球或者PC上的沙漏之類的東東。採用一個動畫吧，這樣用戶就會知道事情正在進行。

結論

當預載有意義的時候做你最好的吧，你的用戶將以此喜歡上你。事實上他們可能並沒有註意到，但是這是一件好事情，如果他們注意到你的網站正在加載，那可能真的是太慢了