CSS 實現網頁圖片的預加載
發(fā)布時間：2009-10-28 23:36:47 作者：佚名 
我要評論
我要評論有很多種方法來實現圖片的預加載，通常大部分使用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值將圖片推出去?；蛘呓o一個負的margin值。有很多中方法隱藏你要預載的圖片，選擇最適合你的吧。
另一種情況
有巨大的圖片需要下載的情況并不會經常發(fā)生，如果你采用通常的做法，提供某種圖片正在加載的表示。這里是一些CSS，可以給用戶一個提示：圖片正在加載。
復制代碼
代碼如下:img { background: url(loadingHourGlass.gif) no-repeat 50% 50%; }
gif圖片可以是動畫，類似于mac上的沙灘球或者PC上的沙漏之類的東東。采用一個動畫吧，這樣用戶就會知道事情正在進行。
結論
當預載有意義的時候做你最好的吧，你的用戶將以此喜歡上你。事實上他們可能并沒有注意到，但是這是一件好事情，如果他們注意到你的網站正在加載，那可能真的是太慢了。
查看Demo
PS:我來解釋一下這個demo吧?？赡茉髡邲]有考慮太多，只是想演示一下預加載的效果，所以這個demo頁面做的有些簡單：他只是將預載的圖片用于a:hover的背景了，這樣在鼠標經過的時候，就可以無閃動的現實那張圖片。嗯，也就是文中的第二種用法……
相關文章
本代碼是一組效果非常炫酷的CSS3頁面預加載loading動畫特效源碼，當點擊頁面的任何一個地方時，loading動畫就會被隱藏2017-05-24
這是一組使用純CSS3制作的預加載動畫特效代碼。共有3種動畫效果，分別是翻書效果，搖晃動畫和旋轉動畫，需要的可以下載試試2017-03-07
CSS3 Loading預加載動畫特效源碼是一款使用before和after偽元素，以及CSS幀動畫來完成各種不同的預加載指示器動畫，感興趣的朋友可以直接下載源碼哦2016-06-30- Web前端圖片加載的方式多種多樣,其所產生的HTTP請求也各異,這里我們就來列舉CSS控制前端圖片HTTP請求的各種情況示例,需要的朋友可以參考下2016-06-16
- 有很多種方法來實現圖片的預加載，通常大部分使用Javascript讓事情滾動。不要再受Javascript預載的束縛了吧，用CSS你就可以毫不麻煩的預載你的圖片,需要的朋友可以了解下2012-12-19
- 本文給大家分享一段簡單的代碼實現css預加載動畫效果，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-09-06
