一般情況下網頁中的圖片都是隨文檔流依次加載的，什么時候用到則什么時候加載，但是有些時候這樣的加載方式往往會影響用戶體驗，比如鼠標hover變換背景圖片的時候，只有鼠標移入才會對變換的圖片進行加載，這樣就可能會出現片刻的加載空白現象；又比如圖片顯示后隱藏再顯示網站內容等也是同樣的道理。

為了在必要的時候增加用戶體驗，提高網頁的交互逼格，這里不得不介紹下圖片預加載的藝術啦。

那么什么是圖片預加載呢？

道理很簡單啦，雖然某些圖片一時半會我用不到，但是為了避免使用時出現的措手不及的現象，我還是乖乖把它們先準備好，在某些時候悄悄的把它們加載進來，以防一時之需。

ok，那么怎么才能實現這樣的功能呢？

其實很簡單啦，

這里呢就介紹一個jquery庫的PReLoadImages()函數，使用這個函數呢就可以輕松實現圖片預加載了，下面來一睹為快吧，代碼如下：

 1 $(function(){ 2     var cache=[]; 3     //編寫一個預加載圖片的jQuery函數 4     $.preLoadImages = function(){ 5         //獲取函數體的參數個數 6         var args_len = arguments.length; 7         //反向循環參數個數，創建img元素 8         for(var i = args_len ; i--;) { 9             var cacheImage = document.createElement(‘img’);10             //指定img元素的src屬性為數組元素的值11             cacheImge.src = arguments[i];12             //將HTML元素加入到數組中13             cache.push(cacheImage);14         }    15     }    16 });

ok，注釋都寫的十分清楚了吧，還是沒看懂？好吧那么我們先不管代碼了，其實只要通過下面一步就可以完成函數的調用，如下：

1 //預加載圖片2 $.preLoadImages('images/sample1.jpg’,’images/sample2.jpg’,'images/sample3.jpg’);

其中的

'images/sample1.jpg’,’images/sample2.jpg’,'images/sample3.jpg’

就是圖片的路徑，預加載多張圖片就用逗號分隔啦，

這樣在網頁上的任何位置引用圖片時，將從緩存中獲取所需的圖片，從而提升用戶的體驗，使網站獲得更好的流暢性哦。

那么還沒完，有人可能會問萬一圖片路徑失效加載出錯了咋辦？

呵呵，再教你一招，出錯就出錯了唄，我們有plan B，針對出錯的圖片顯示另一張我們事先準備好的圖片，用這張圖片來替換所有無法顯示的圖片，那么怎樣才能做到呢，方法也十分簡單，代碼如下：

1 $(function(){2     $("img").error(function(){3         $(this).prop("src","images/planB.jpg");4     });5 });

搞定，這下我們做的萬無一失了，

這里主要介紹下error()事件，它的定義和用法為：

　　當元素遇到錯誤（沒有正確載入）時，發生 error 事件。

　　error() 方法觸發 error 事件，或規定當發生 error 事件時運行的函數。

很好理解吧，至此我們的圖片預加載的方法就介紹完了。

本文部分代碼及寫作思路參考于《超實用的JQuery代碼段》一書，歡迎大家積極嘗試、評論及指正。

原創文章，轉載請注明來自一個蘿卜一個坑  -博客園[http://www.cnblogs.com/luozhihao]
本文地址：http://www.cnblogs.com/luozhihao/p/4719695.html