預載入顯示圖片的藝術

勞卜發表於2016-12-13
原文網址 : https://juejin.im/post/584f53f08e450a006ad04789

前言

一般情況下網頁中的圖片都是隨文件流依次載入的，什麼時候用到則什麼時候載入，但是有些時候這樣的載入方式往往會影響使用者體驗，比如滑鼠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程式碼段》一書。

相關文章