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

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

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

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

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

其實很簡單啦，

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

$(function(){  var cache=[];  //編寫一個預加載圖片的jQuery函數  $.preLoadImages = function(){    //獲取函數體的參數個數    var args_len = arguments.length;    //反向循環參數個數，創建img元素    for(var i = args_len ; i--;) {      var cacheImage = document.createElement(‘img');      //指定img元素的src屬性為數組元素的值      cacheImge.src = arguments[i];      //將HTML元素加入到數組中      cache.push(cacheImage);    }    }  });

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

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

其中的

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

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

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

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

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

$(function(){  $("img").error(function(){     $(this).prop("src","images/planB.jpg");  });});

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

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

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

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

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

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

以上就是本文的全部內容，希望對大家有所幫助，同時也希望多多支持武林網！