為什么使用預(yù)載

你為什么會(huì)考慮使用預(yù)載呢？你是否曾有個(gè)網(wǎng)站，在那個(gè)網(wǎng)站你要滾動(dòng)你的導(dǎo)航然后有個(gè)延遲直到圖片被加載完……嘿嘿。預(yù)載將在這方面幫助你。它將在頁(yè)面加載的時(shí)候加載那些圖片并將其存儲(chǔ)在瀏覽器的緩存里面。這樣當(dāng)用戶滾動(dòng)導(dǎo)航的時(shí)候，很漂亮而且流暢，沒(méi)有延遲。

CSS代碼

這個(gè)概念就是寫(xiě)一個(gè)CSS樣式設(shè)置一批背景圖片，然后將其隱藏，這樣你就看不到那些圖片了。那些背景圖片就是你想預(yù)載的圖片。

這是一個(gè)例子:

復(fù)制代碼代碼如下:
#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ì)被顯示。我也見(jiàn)到有人使用非常大的background-position值將圖片推出去。或者給一個(gè)負(fù)的margin值。有很多中方法隱藏你要預(yù)載的圖片，選擇最適合你的吧。

另一種情況

有巨大的圖片需要下載的情況并不會(huì)經(jīng)常發(fā)生，如果你采用通常的做法，提供某種圖片正在加載的表示。這里是一些CSS，可以給用戶一個(gè)提示：圖片正在加載。

復(fù)制代碼代碼如下:
img { background: url(loadingHourGlass.gif) no-repeat 50% 50%; }

gif圖片可以是動(dòng)畫(huà)，類似于mac上的沙灘球或者PC上的沙漏之類的東東。采用一個(gè)動(dòng)畫(huà)吧，這樣用戶就會(huì)知道事情正在進(jìn)行。

結(jié)論

當(dāng)預(yù)載有意義的時(shí)候做你最好的吧，你的用戶將以此喜歡上你。事實(shí)上他們可能并沒(méi)有注意到，但是這是一件好事情，如果他們注意到你的網(wǎng)站正在加載，那可能真的是太慢了。

查看Demo

PS:我來(lái)解釋一下這個(gè)demo吧。可能原作者沒(méi)有考慮太多，只是想演示一下預(yù)加載的效果，所以這個(gè)demo頁(yè)面做的有些簡(jiǎn)單：他只是將預(yù)載的圖片用于a:hover的背景了，這樣在鼠標(biāo)經(jīng)過(guò)的時(shí)候，就可以無(wú)閃動(dòng)的現(xiàn)實(shí)那張圖片。嗯，也就是文中的第二種用法……