一般情況下網頁中的圖片都是隨文檔流依次加載的，什么時候用到則什么時候加載，但是有些時候這樣的加載方式往往會影響用戶體驗，比如鼠標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代碼段》一書，歡迎大家積極嘗試、評論及指正。

總結

以上是生活随笔為你收集整理的预加载显示图片的艺术的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。