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上的沙漏之類的東東。採用一個動畫吧，這樣使用者就會知道事情進行中。

結論

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