預加載顯示圖片的藝術

前言

通常狀況下網頁中的圖片都是隨文檔流依次加載的,何時用到則何時加載,可是有些時候這樣的加載方式每每會影響用戶體驗,好比鼠標hover變換背景圖片的時候,只有鼠標移入纔會對變換的圖片進行加載,這樣就可能會出現片刻的加載空白現象。javascript

爲了在必要的時候增長用戶體驗,提升網頁的交互逼格,這裏不得不介紹下圖片預加載的藝術。java

那麼什麼是圖片預加載呢?jquery

道理很簡單,雖然某些圖片一時半會咱們用不到,可是爲了不使用時出現的措手不及的現象,咱們仍是須要乖乖地把它們先準備好,在某些時候悄悄地把它們加載進來,以防一時之需。數組

方法

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');複製代碼

其中的ui

‘images/sample1.jpg’,‘images/sample2.jpg’,‘images/sample3.jpg’this

就是圖片的路徑,預加載多張圖片能夠用逗號分隔,spa

這樣在網頁上的任何位置引用圖片時,將從緩存中獲取所需的圖片,從而提高用戶的體驗,使網站得到更好的流暢性。

這裏還沒完,有人可能會問萬一圖片路徑失效加載出錯了咋辦?

再教你一招,咱們有planB,針對出錯的圖片顯示另外一張咱們事先準備好的圖片,用這張圖片來替換全部沒法顯示的圖片,方法也十分簡單,代碼以下:

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

這下咱們作的萬無一失了,這裏主要介紹下error()事件,它的定義和用法爲:

  • 當元素遇到錯誤(沒有正確載入)時,發生 error 事件。

  • error() 方法觸發 error 事件,或規定當發生 error 事件時運行的函數。

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

結語

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

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

相關文章
相關標籤/搜索