前言
一般情況下網頁中的圖片都是隨文檔流依次加載的，什么時候用到則什么時候加載，但是有些時候這樣的加載方式往往會影響用戶體驗，比如鼠標hover變換背景圖片的時候，只有鼠標移入才會對變換的圖片進行加載，這樣就可能會出現片刻的加載空白現象。
為了在必要的時候增加用戶體驗，提高網頁的交互逼格，這里不得不介紹下圖片預加載的藝術。
那么什么是圖片預加載呢？
道理很簡單，雖然某些圖片一時半會我們用不到，但是為了避免使用時出現的措手不及的現象，我們還是需要乖乖地把它們先准備好，在某些時候悄悄地把它們加載進來，以防一時之需。
方法
ok，那么怎么才能實現這樣的功能？
其實很簡單，這里就介紹一個jquery庫的preLoadImages()函數，使用這個函數就可以輕松實現圖片預加載。代碼如下：
$(function(){
var cache=[];
//編寫一個預加載圖片的jQuery函數
$.preLoadImages = function(){
//獲取函數體的參數個數
var args_len = arguments.length;
// 循環參數個數，創建img元素
for(var i = 0; i < args_len; i++) {
var cacheImage = document.createElement('img');
//指定img元素的src屬性為數組元素的值
cacheImge.src = arguments[i];
//將HTML元素加入到數組中
cache.push(cacheImage);
}
}
});
只要通過下面一步就可以完成函數的調用，如下：
//預加載圖片
$.preLoadImages('images/sample1.jpg', 'images/sample2.jpg', 'images/sample3.jpg');
其中的
‘images/sample1.jpg’，‘images/sample2.jpg’，‘images/sample3.jpg’
就是圖片的路徑，預加載多張圖片可以用逗號分隔，
這樣在網頁上的任何位置引用圖片時，將從緩存中獲取所需的圖片，從而提升用戶的體驗，使網站獲得更好的流暢性。
這里還沒完，有人可能會問萬一圖片路徑失效加載出錯了咋辦？
再教你一招，我們有planB，針對出錯的圖片顯示另一張我們事先准備好的圖片，用這張圖片來替換所有無法顯示的圖片，方法也十分簡單，代碼如下：
$(function(){
$("img").error(function(){
$(this).prop("src","images/planB.jpg");
});
});
這下我們做的萬無一失了，這里主要介紹下error()事件，它的定義和用法為：
-
當元素遇到錯誤（沒有正確載入）時，發生 error 事件。
-
error() 方法觸發 error 事件，或規定當發生 error 事件時運行的函數。
至此我們簡單的圖片預加載的方法就介紹完了。
結語
這里我們需要區分圖片預加載和懶加載的區別。兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。
本文部分代碼及寫作思路參考於《超實用的JQuery代碼段》一書。