網頁圖片預加載實現的幾個方法解析

網頁中預加載圖片是提高用戶體驗的一個很好方法。圖片預先加載到瀏覽器中，訪問者便可順利地在你的網站上衝浪，並享受到極快的加載速度。這對圖片畫廊及圖片佔據很大比例的網站來說十分有利，它保證了圖片快速加載，特別是一些大型的電商網站就常用！幫助用戶在瀏覽你網站內容時獲得更好的用戶體驗，下面就來說說實現圖片預加載的方法。

一、使用JavaScript實現預加載

提供兩種這樣的預加載方法，它們可以很漂亮地工作於所有現代瀏覽器之上。

只需簡單編輯、加載所需要圖片的路徑與名稱即可，很容易實現：

該方法尤其適用預加載大量的圖片。畫廊網站使用該技術，預加載圖片數量達50多張的時候。將該腳本應用到登錄頁面，只要用戶輸入登錄帳號，大部分畫廊圖片將被預加載。

另外一種方法與上面的方法類似，也可以預加載任意數量的圖片。將下面的腳本添加入任何Web頁中，根據程序指令進行編輯即可。

每加載一個圖片都需要創建一個變量，如“img1 = new Image();”，及圖片源地址聲明，如“img3.src = "../path/to/image-003.gif";”。參考該模式，你可根據需要加載任意多的圖片。

二、用CSS實現預加載

單純使用CSS，可容易、高效地預加載圖片，代碼如下：

#preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }#preload-02 { background: url(-02.png) no-repeat -9999px -9999px; }#preload-03 { background: url(-03.png) no-repeat -9999px -9999px; }

將這三個ID選擇器應用到HTML元素中，我們便可通過CSS的background屬性將圖片預加載到屏幕外的背景上。只要這些圖片的路徑保持不變，當它們在Web頁面的其他地方被調用時，瀏覽器就會在渲染過程中使用預加載（緩存）的圖片。簡單、高效，不需要任何JavaScript。