預加載顯示圖片的藝術

前言

通常狀況下網頁中的圖片都是隨文檔流依次加載的，何時用到則何時加載，可是有些時候這樣的加載方式每每會影響用戶體驗，好比鼠標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 事件時運行的函數。

至此咱們簡單的圖片預加載的方法就介紹完了。

結語

這裏咱們須要區分圖片預加載和懶加載的區別。二者的行爲是相反的，一個是提早加載，一個是遲緩甚至不加載。

本文首發於個人博客：www.cnblogs.com/luozhihao，部分代碼及寫做思路參考於《超實用的jQuery代碼段》一書。