實(shí)現(xiàn)預(yù)加載圖片有很多方法，包括使用CSS、JavaScript及兩者的各種組合。這些技術(shù)可根據(jù)不同設(shè)計(jì)場(chǎng)景設(shè)計(jì)出相應(yīng)的解決方案，十分高效。
單純使用CSS，可容易、高效地預(yù)加載圖片，代碼如下：
代碼如下:
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

將這三個(gè)ID選擇器應(yīng)用到(X)HTML元素中，我們便可通過(guò)CSS的background屬性將圖片預(yù)加載到屏幕外的背景上。只要這些圖片的路徑保持不變，當(dāng)它們?cè)赪eb頁(yè)面的其他地方被調(diào)用時(shí)，瀏覽器就會(huì)在渲染過(guò)程中使用預(yù)加載（緩存）的圖片。簡(jiǎn)單、高效，不需要任何JavaScript。
該方法雖然高效，但仍有改進(jìn)余地。使用該法加載的圖片會(huì)同頁(yè)面的其他內(nèi)容一起加載，增加了頁(yè)面的整體加載時(shí)間。為了解決這個(gè)問(wèn)題，我們?cè)黾恿艘恍㎎avaScript代碼，來(lái)推遲預(yù)加載的時(shí)間，直到頁(yè)面加載完畢。代碼如下：
代碼如下:
// better image preloading @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
function preloader() {
if (document.getElementById) {
document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);

在該腳本的第一部分，我們獲取使用類選擇器的元素，并為其設(shè)置了background屬性，以預(yù)加載不同的圖片。
該腳本的第二部分，我們使用addLoadEvent()函數(shù)來(lái)延遲preloader()函數(shù)的加載時(shí)間，直到頁(yè)面加載完畢。
如果JavaScript無(wú)法在用戶的瀏覽器中正常運(yùn)行，會(huì)發(fā)生什么？很簡(jiǎn)單，圖片不會(huì)被預(yù)加載，當(dāng)頁(yè)面調(diào)用圖片時(shí)，正常顯示即可。

方法二：僅使用JavaScript實(shí)現(xiàn)預(yù)加載

上述方法有時(shí)確實(shí)很高效，但我們逐漸發(fā)現(xiàn)它在實(shí)際實(shí)現(xiàn)過(guò)程中會(huì)耗費(fèi)太多時(shí)間。相反，我更喜歡使用純JavaScript來(lái)實(shí)現(xiàn)圖片的預(yù)加載。下面將提供兩種這樣的預(yù)加載方法，它們可以很漂亮地工作于所有現(xiàn)代瀏覽器之上。

JavaScript代碼段1

只需簡(jiǎn)單編輯、加載所需要圖片的路徑與名稱即可，很容易實(shí)現(xiàn)：
代碼如下:

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com