純CSS圖片預(yù)加載實(shí)例 擺脫Javascript預(yù)載的束縛

有很多種方法來實(shí)現(xiàn)圖片的預(yù)加載,通常大部分使用Javascript讓事情滾動(dòng)。不要再受Javascript預(yù)載的束縛了吧,用CSS你就可以毫不麻煩的預(yù)載你的圖片。
為什么使用預(yù)載
你為什么會(huì)考慮使用預(yù)載呢?你是否曾有個(gè)網(wǎng)站,在那個(gè)網(wǎng)站你要滾動(dòng)你的導(dǎo)航然后有個(gè)延遲直到圖片被加載完……嘿嘿。預(yù)載將在這方面幫助你。它將在頁面加載的時(shí)候加載那些圖片并將其存儲(chǔ)在瀏覽器的緩存里面。這樣當(dāng)用戶滾動(dòng)導(dǎo)航的時(shí)候,很漂亮而且流暢,沒有延遲。
CSS代碼
這個(gè)概念就是寫一個(gè)CSS樣式設(shè)置一批背景圖片,然后將其隱藏,這樣你就看不到那些圖片了。那些背景圖片就是你想預(yù)載的圖片。
這是一個(gè)例子:
#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;
}
這只是一種隱藏你的圖片的方法,所以它們不會(huì)被顯示。我也見到有人使用非常大的background-position值將圖片推出去。或者給一個(gè)負(fù)的margin值。有很多中方法隱藏你要預(yù)載的圖片,選擇最適合你的吧。
另一種情況
有巨大的圖片需要下載的情況并不會(huì)經(jīng)常發(fā)生,如果你采用通常的做法,提供某種圖片正在加載的表示。這里是一些CSS,可以給用戶一個(gè)提示:圖片正在加載。
img { background: url(loadingHourGlass.gif) no-repeat 50% 50%; }
gif圖片可以是動(dòng)畫,類似于mac上的沙灘球或者PC上的沙漏之類的東東。采用一個(gè)動(dòng)畫吧,這樣用戶就會(huì)知道事情正在進(jìn)行。
結(jié)論
當(dāng)預(yù)載有意義的時(shí)候做你最好的吧,你的用戶將以此喜歡上.你。事實(shí)上他們可能并沒有注意到,但是這是一件好事情,如果他們注意到你的網(wǎng)站正在加載,那可能真的是太慢了。
查看Demo
關(guān)于實(shí)例一的特別說明
首先多謝評(píng)論中網(wǎng)友提出的問題,翻譯完這篇文章之后,考慮到一個(gè)css規(guī)則中多次定義同一個(gè)屬性,瀏覽器一般只會(huì)處理最后一個(gè),決定有必要做一下檢驗(yàn),但是沒有意識(shí)到事情的嚴(yán)重性,所以沒有及時(shí)處理,以至于可能會(huì)造成一些誤解。
根據(jù)我的測(cè)試,大部分瀏覽器都是只加載了最后一個(gè)圖片,前兩個(gè)圖片被無視了。但是在webkit核心的瀏覽器中,比如chrome,會(huì)預(yù)加載這三個(gè)圖片。實(shí)例一為我們提供了一個(gè)很好的處理問題的思路,但是對(duì)于在同一個(gè)css樣式中加載多個(gè)圖片的用法,可能還要等css3的多背景圖片屬性被更多的瀏覽器支持才行。
PS:我來解釋一下這個(gè)demo吧??赡茉髡邲]有考慮太多,只是想演示一下預(yù)加載的效果,所以這個(gè)demo頁面做的有些簡(jiǎn)單:他只是將預(yù)載的圖片用于a:hover的背景了,這樣在鼠標(biāo)經(jīng)過的時(shí)候,就可以無閃動(dòng)的現(xiàn)實(shí)那張圖片。嗯,也就是文中的第二種用法……
相關(guān)文章
30種CSS3炫酷頁面預(yù)加載loading動(dòng)畫特效源碼
本代碼是一組效果非常炫酷的CSS3頁面預(yù)加載loading動(dòng)畫特效源碼,當(dāng)點(diǎn)擊頁面的任何一個(gè)地方時(shí),loading動(dòng)畫就會(huì)被隱藏2017-05-24- 這是一組使用純CSS3制作的預(yù)加載動(dòng)畫特效代碼。共有3種動(dòng)畫效果,分別是翻書效果,搖晃動(dòng)畫和旋轉(zhuǎn)動(dòng)畫,需要的可以下載試試2017-03-07
CSS3 預(yù)加載Loading動(dòng)畫特效源碼
CSS3 Loading預(yù)加載動(dòng)畫特效源碼是一款使用before和after偽元素,以及CSS幀動(dòng)畫來完成各種不同的預(yù)加載指示器動(dòng)畫,感興趣的朋友可以直接下載源碼哦2016-06-30- Web前端圖片加載的方式多種多樣,其所產(chǎn)生的HTTP請(qǐng)求也各異,這里我們就來列舉CSS控制前端圖片HTTP請(qǐng)求的各種情況示例,需要的朋友可以參考下2016-06-16
CSS 實(shí)現(xiàn)網(wǎng)頁圖片的預(yù)加載
有很多種方法來實(shí)現(xiàn)圖片的預(yù)加載,通常大部分使用Javascript讓事情滾動(dòng)。不要再受Javascript預(yù)載的束縛了吧,用CSS你就可以毫不麻煩的預(yù)載你的圖片。2009-10-28純CSS實(shí)現(xiàn)預(yù)加載動(dòng)畫效果
本文給大家分享一段簡(jiǎn)單的代碼實(shí)現(xiàn)css預(yù)加載動(dòng)畫效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-09-06