這篇文章給大家分享的是有關(guān)jQuery實現(xiàn)預(yù)加載圖片功能的方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站-成都網(wǎng)站建設(shè)公司，專注做網(wǎng)站、成都做網(wǎng)站、網(wǎng)站營銷推廣，國際域名空間，網(wǎng)絡(luò)空間，網(wǎng)站托管、服務(wù)器租用有關(guān)企業(yè)網(wǎng)站制作方案、改版、費用等問題，請聯(lián)系創(chuàng)新互聯(lián)建站。

最近要用javascript做一個動畫功能，為了確保動畫在播放的時候能夠順利和平滑，我需要對所用到的圖片素材進行預(yù)加載

單圖片預(yù)加載

目前最常見的一種實現(xiàn)方式如下

function preloadImg(url) {
    var img = new Image();
    img.src = url;
    if(img.complete) {
        //接下來可以使用圖片了
        //do something here
    }
    else {
        img.onload = function() {
            //接下來可以使用圖片了
            //do something here
        };
    }
}

首先實例化一個Image對象賦值給img，然后設(shè)置img.src為參數(shù)url指定的圖片地址,接著判斷img的complete屬性，如果本地有這張圖片的緩存，則該值為true，此時我們可以直接操作這張圖片，如果本地沒有緩存，則該值為false，此時我們需要監(jiān)聽img的onload事件，把對img的操作放在onload的回調(diào)函數(shù)里面，經(jīng)過測試，這種方案基本能夠兼容目前所有瀏覽器

多圖片預(yù)加載

很多場景下，單圖片預(yù)加載并不能滿足我們的需求，因為像動畫這種功能通常都會有很多的圖片素材，接下來我們就在原來單圖片預(yù)加載的基礎(chǔ)上來改進我們的函數(shù)

function preloadImg(list) {
    var imgs = arguments[1] || [],    //用于存儲預(yù)加載好的圖片資源
        fn = arguments.cal    lee;
    if(list.length == 0) {
        return imgs;
    }
    var img = new Image();
    img.src = list[0];
    if(img.complete) {
        imgs.push(img);
        list.shift();
        fn(list, imgs);
    }
    else {
        img.onload = function() {
            imgs.push(img);
            list.shift();
            fn(list, imgs);
        };
    }
}
var list = [......],    //此處省略一萬個字符
    imgs = preloadImg();

因為幀動畫可能需要保證每一幀動畫所用的圖片的順序，所以我在這段代碼中使用遞歸的方式，在上一張加載完成之后再去加載下一張圖片，每加載一張圖片，就把這張圖片資源存儲到imgs數(shù)組中，并且把這張圖片的地址從地址數(shù)組list中去掉，當(dāng)list中已經(jīng)沒有地址的時候跳出遞歸，并返回imgs數(shù)組

設(shè)想很美好，現(xiàn)實很殘酷，這段代碼有2個不能忍受的問題

首先，我很有可能拿不到最后返回的imgs數(shù)組，因為只要有圖片在本地沒有緩存，imgs的存儲操作都會放到onload的回調(diào)事件中，而事件監(jiān)聽也屬于javascript中異步操作的一種，在綁定完onload事件的回調(diào)函數(shù)后，preloadImg函數(shù)就執(zhí)行結(jié)束了，沒有任何返回值，外部imgs變量接收到的值為undefined，只有在所有圖片都有本地緩存的情況下，外部imgs變量才能順利拿到存儲了全部預(yù)加載圖片資源的數(shù)組

在加載完一張圖片之后才去加載下一張，整個預(yù)加載圖片的過程所需要的時間相對會比較長，用戶體驗會降低，而且本來異步操作具體速度快的特性，這樣的實現(xiàn)方式等于完全棄置了onload異步的這個特性

多圖片預(yù)加載（改進版）

這次我們直接把一個空數(shù)組作為參數(shù)傳進函數(shù)，圖片全部存儲到這個數(shù)組里面，下面是改進后的函數(shù)代碼（假設(shè)我們可以使用jQuery）

function preloadImg(list,imgs) {
    var def = $.Deferred(),
        len = list.length;
    $(list).each(function(i,e) {
        var img = new Image();
        img.src = e;
        if(img.complete) {
            imgs[i] = img;
            len--;
            if(len == 0) {
                def.resolve();
            }
        }
        else {
            img.onload = (function(j) {
                return function() {
                    imgs[j] = img
                    len--;
                    if(len == 0) {
                        def.resolve();
                    }
                };
            })(i);
            img.onerror = function() {
                len--;
                console.log('fail to load image');
            };
        }
    });
    return def.promise();
}
var list = [......],    //此處省略一萬個字符
    imgs = [];
$.when(preloadImg(list, imgs)).done(
    function() {
        //預(yù)加載結(jié)束
        //do something here
    }
);

在分別給每一個img綁定onload的回調(diào)函數(shù)時采用了閉包的方式，目的是為了保存住當(dāng)前的遞增變量i，要是不這么做，結(jié)果將會是list地址中沒有本地緩存的圖片都存儲到imgs的最后一個元素上

這次每載入一張圖片，我們并沒有把這張圖片的地址從list數(shù)組中去掉，這樣后續(xù)需要使用list數(shù)組的數(shù)據(jù)時就能夠順利獲取到

在這次的代碼中，我們引入了jQuery的Deferred對象，這樣更方便我把握整個預(yù)加載圖片的過程

感謝各位的閱讀！關(guān)于jQuery實現(xiàn)預(yù)加載圖片功能的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站欄目：jQuery實現(xiàn)預(yù)加載圖片功能的方法-創(chuàng)新互聯(lián)
本文路徑：http://weahome.cn/article/ehehh.html