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

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

那么什么是圖片預(yù)加載呢？

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

ok，那么怎么才能實現(xiàn)這樣的功能呢？

其實很簡單啦，

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

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

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

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

其中的

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

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

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

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

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

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

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

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

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

　　error() 方法觸發(fā) error 事件，或規(guī)定當發(fā)生 error 事件時運行的函數(shù)。

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

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

以上就是本文的全部內(nèi)容，希望對大家有所幫助，同時也希望多多支持腳本之家！

最新評論