3種Javascript圖片預(yù)加載的方法詳解

加載圖片是提高用戶體驗(yàn)的一個(gè)很好方法。圖片預(yù)先加載到瀏覽器中，訪問(wèn)者便可順利地在你的網(wǎng)站上沖浪，并享受到極快的加載速度。

這對(duì)圖片畫廊及圖片占據(jù)很大比例的網(wǎng)站來(lái)說(shuō)十分有利，它保證了圖片快速、無(wú)縫地發(fā)布，也可幫助用戶在瀏覽你網(wǎng)站內(nèi)容時(shí)獲得更好的用戶體驗(yàn)。本文將分享三個(gè)不同的預(yù)加載技術(shù)，來(lái)增強(qiáng)網(wǎng)站的性能與可用性。

方法一：用css和JavaScript實(shí)現(xiàn)預(yù)加載

實(shí)現(xiàn)預(yù)加載圖片有很多方法，包括使用css、JavaScript及兩者的各種組合。這些技術(shù)可根據(jù)不同設(shè)計(jì)場(chǎng)景設(shè)計(jì)出相應(yīng)的解決方案，十分高效。

單純使用CSS，可容易、高效地預(yù)加載圖片，代碼如下：

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }  
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }  
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

將這三個(gè)ID選擇器應(yīng)用到(X)html元素中，我們便可通過(guò)CSS的background屬性將圖片預(yù)加載到屏幕外的背景上。

只要這些圖片的路徑保持不變，當(dāng)它們?cè)赪eb頁(yè)面的其他地方被調(diào)用時(shí)，瀏覽器就會(huì)在渲染過(guò)程中使用預(yù)加載（緩存）的圖片。簡(jiǎn)單、高效，不需要任何JavaScript。

該方法雖然高效，但仍有改進(jìn)余地。使用該法加載的圖片會(huì)同頁(yè)面的其他內(nèi)容一起加載，增加了頁(yè)面的整體加載時(shí)間。

為了解決這個(gè)問(wèn)題，我們?cè)黾恿艘恍㎎avaScript代碼，來(lái)推遲預(yù)加載的時(shí)間，直到頁(yè)面加載完畢。代碼如下：

function preloader() {  
    if (document.getElementById) {  
        document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";  
    }  
}  
function addLoadEvent(func) {  
    var oldonload = window.onload;  
    if (typeof window.onload != 'function') {  
        window.onload = func;  
    } else {  
        window.onload = function() {  
            if (oldonload) {  
                oldonload();  
            }  
            func();  
        }  
    }  
}  
addLoadEvent(preloader);

在該腳本的第一部分，我們獲取使用類選擇器的元素，并為其設(shè)置了background屬性，以預(yù)加載不同的圖片。

該腳本的第二部分，我們使用addLoadEvent()函數(shù)來(lái)延遲preloader()函數(shù)的加載時(shí)間，直到頁(yè)面加載完畢。

如果JavaScript無(wú)法在用戶的瀏覽器中正常運(yùn)行，會(huì)發(fā)生什么？很簡(jiǎn)單，圖片不會(huì)被預(yù)加載，當(dāng)頁(yè)面調(diào)用圖片時(shí)，正常顯示即可。

方法二：僅使用JavaScript實(shí)現(xiàn)預(yù)加載

上述方法有時(shí)確實(shí)很高效，但我們逐漸發(fā)現(xiàn)它在實(shí)際實(shí)現(xiàn)過(guò)程中會(huì)耗費(fèi)太多時(shí)間。相反，我更喜歡使用純JavaScript來(lái)實(shí)現(xiàn)圖片的預(yù)加載。

下面將提供兩種這樣的預(yù)加載方法，它們可以很漂亮地工作于所有現(xiàn)代瀏覽器之上。

JavaScript代碼段1

只需簡(jiǎn)單編輯、加載所需要圖片的路徑與名稱即可，很容易實(shí)現(xiàn)：

<div class="hidden">  
    <script type="text/javascript">  
           var images = new Array()  
            function preload() {  
                for (i = 0; i < preload.arguments.length; i++) {  
                    images[i] = new Image()  
                    images[i].src = preload.arguments[i]  
                }  
            }  
            preload(  
                "http://domain.tld/gallery/image-001.jpg",  
                "http://domain.tld/gallery/image-002.jpg",  
                "http://domain.tld/gallery/image-003.jpg"  
            )  
</script> 
</div>

該方法尤其適用預(yù)加載大量的圖片。我的畫廊網(wǎng)站使用該技術(shù)，預(yù)加載圖片數(shù)量達(dá)50多張。將該腳本應(yīng)用到登錄頁(yè)面，只要用戶輸入登錄帳號(hào)，大部分畫廊圖片將被預(yù)加載。

JavaScript代碼段2

該方法與上面的方法類似，也可以預(yù)加載任意數(shù)量的圖片。將下面的腳本添加入任何Web頁(yè)中，根據(jù)程序指令進(jìn)行編輯即可。

<div class="hidden">  
    <script type="text/javascript">  
            if (document.images) {  
                img1 = new Image();  
                img2 = new Image();  
                img3 = new Image();  
                img1.src = "http://domain.tld/path/to/image-001.gif";  
                img2.src = "http://domain.tld/path/to/image-002.gif";  
                img3.src = "http://domain.tld/path/to/image-003.gif";  
            }    
</script>  
</div>

正如所看見(jiàn)，每加載一個(gè)圖片都需要?jiǎng)?chuàng)建一個(gè)變量，如“img1 = new Image();”，及圖片源地址聲明，如“img3.src = “../path/to/image-003.gif”;”。參考該模式，你可根據(jù)需要加載任意多的圖片。

我們又對(duì)該方法進(jìn)行了改進(jìn)。將該腳本封裝入一個(gè)函數(shù)中，并使用 addLoadEvent（），延遲預(yù)加載時(shí)間，直到頁(yè)面加載完畢。

function preloader() {  
    if (document.images) {  
        var img1 = new Image();  
        var img2 = new Image();  
        var img3 = new Image();  
        img1.src = "http://domain.tld/path/to/image-001.gif";  
        img2.src = "http://domain.tld/path/to/image-002.gif";  
        img3.src = "http://domain.tld/path/to/image-003.gif";  
    }  
}  
function addLoadEvent(func) {  
    var oldonload = window.onload;  
    if (typeof window.onload != 'function') {  
        window.onload = func;  
    } else {  
        window.onload = function() {  
            if (oldonload) {  
                oldonload();  
            }  
            func();  
        }  
    }  
}  
addLoadEvent(preloader);

方法三：使用Ajax實(shí)現(xiàn)預(yù)加載

上面所給出的方法似乎不夠酷，那現(xiàn)在來(lái)看一個(gè)使用Ajax實(shí)現(xiàn)圖片預(yù)加載的方法。該方法利用DOM，不僅僅預(yù)加載圖片，還會(huì)預(yù)加載CSS、JavaScript等相關(guān)的東西。使用Ajax，比直接使用JavaScript，優(yōu)越之處在于JavaScript和CSS的加載不會(huì)影響到當(dāng)前頁(yè)面。該方法簡(jiǎn)潔、高效。

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a js and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};

上面代碼預(yù)加載了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超時(shí)是為了防止腳本掛起，而導(dǎo)致正常頁(yè)面出現(xiàn)功能問(wèn)題。

下面，我們看看如何用JavaScript來(lái)實(shí)現(xiàn)該加載過(guò)程：

window.onload = function() {  
    setTimeout(function() {  
        // reference to <head>  
        var head = document.getElementsByTagName('head')[0];  
        // a new CSS  
        var css = document.createElement('link');  
        css.type = "text/css";  
        css.rel  = "stylesheet";  
        css.href = "http://domain.tld/preload.css";  
        // a new JS  
        var js  = document.createElement("script");  
        js.type = "text/javascript";  
        js.src  = "http://domain.tld/preload.js";  
        // preload JS and CSS  
        head.appendChild(css);  
        head.appendChild(js);  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000); 
};

這里，我們通過(guò)DOM創(chuàng)建三個(gè)元素來(lái)實(shí)現(xiàn)三個(gè)文件的預(yù)加載。正如上面提到的那樣，使用Ajax，加載文件不會(huì)應(yīng)用到加載頁(yè)面上。從這點(diǎn)上看，Ajax方法優(yōu)越于JavaScript。

- End -

臺(tái)給的base64格式的圖片如下

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

看好了，就是拼接一個(gè)'data:image/jpg;base64,'+就可以了。

擴(kuò)展

data:,文本數(shù)據(jù)

data:text/plain,文本數(shù)據(jù)

data:text/html,HTML代碼

data:text/html;base64,base64編碼的HTML代碼

data:text/css,CSS代碼

data:text/css;base64,base64編碼的CSS代碼

data:text/javascript,Javascript代碼

data:text/javascript;base64,base64編碼的Javascript代碼

data:image/gif;base64,base64編碼的gif圖片數(shù)據(jù)

data:image/png;base64,base64編碼的png圖片數(shù)據(jù)

data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)

data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù)

為一個(gè)程序員，一個(gè)熱愛(ài)技術(shù)寫作的人，把自己的知識(shí)經(jīng)驗(yàn)通過(guò)文字呈現(xiàn)在讀者面前，并且讓讀者通過(guò)文字，就能將知識(shí)進(jìn)行學(xué)以致用，其實(shí)，是非常有調(diào)整性的一件事情，因?yàn)椋枰遗c讀者保持有效溝通，既不浪費(fèi)讀者的時(shí)間，也不浪費(fèi)自己的時(shí)間，同時(shí)還要保證讀者能夠讀有所獲。

由于技術(shù)文章的質(zhì)量很大程度上取決于其內(nèi)容的易消化程度，因此，我傾向于利用以圖形交換格式 (GIF) 格式編碼的屏幕截圖，以盡可能減少額外的文本描述塊。例如，在更傾向于 Web 開發(fā)內(nèi)容的文章中，例如：

在這種情況下，我總是發(fā)現(xiàn)嵌入動(dòng)畫 GIF 來(lái)演示我創(chuàng)建的開源工具的任何用法是有益的：

鑒于 Microsoft Powerpoint 的內(nèi)置屏幕錄制功能很容易訪問(wèn)，雖然，可以輕松完成自己的屏幕錄制以輸出屏幕截圖，但我覺(jué)得更有益的探索領(lǐng)域?qū)⑹?- 易于訪問(wèn)轉(zhuǎn)換視頻的工具將屏幕截圖（.mp4、.avi 等）轉(zhuǎn)換為 .GIF 圖像文件。

— 注意：按照慣例，如果要渲染動(dòng)畫短片（≤ 30 秒），則 GIF 文件更合適。

使用 GIFEncoder.js 將視頻構(gòu)建到 GIF Maker

為了構(gòu)建瀏覽器實(shí)用程序，如下所示：

這 3 個(gè) JavaScript 插件是必需的：

GIFEncoder.js
LZWEncoder.js
NeuQuant.js

僅供參考：這些插件最初是由 GitHub 用戶 Kevin Kwok（創(chuàng)建者）從 GitHub repo jsgif 中檢索到的。

視頻到 GIF 轉(zhuǎn)換概述

先決條件：包含在上述3個(gè)文件中+ b64.js如下：

<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script>
<script type="text/javascript" src="GIFEncoder.js"></script>
<script type="text/javascript" src="b64.js"></script>

技術(shù)實(shí)施——總共 4 個(gè)步驟

步驟（1）：上傳視頻片段（≤30秒）

因此，在 HTML 代碼中，包含一個(gè)簡(jiǎn)單的用戶輸入界面：

<input id='inputVideoClipFile' type='file' multiple='false' 
accept='.mp4,.webm,.avi,.mpeg,.flv,.mov,.3gp' />

將事件處理程序（onchange）標(biāo)記到上面并繼續(xù)在 JavaScript 中初始化 FileReader 實(shí)例：

inputVideoClipFile.onchange = function(uploadFle) {
  let file = inputVideoClipFile.files[0];
let fileName=file.name;
  let fileSize=(file.size/1024).toFixed(2);
  let fileType=file.type;
let fileredr = new FileReader();
fileredr.onload = function (fle) {
    var b64Str=fle.target.result;
}; // end file-reader onload
  fileredr.readAsDataURL(file);
};

請(qǐng)注意，新的 FileReader() 實(shí)例調(diào)用 readAsDataURL，因此分配給 b64Str 的視頻文件內(nèi)容被讀取為 Base64 字符串。

從文件對(duì)象中檢索視頻文件的信息以供稍后顯示。

步驟（2）：處理視頻二進(jìn)制數(shù)據(jù)并提取幀，有兩個(gè)主要部分需要考慮：

Part I. 通過(guò)創(chuàng)建 <video></video> DOM 元素并在 JavaScript 中分配相應(yīng)的屬性來(lái)預(yù)覽視頻內(nèi)容以供顯示.

// rendered as <video></video> in HTML code
var videoObj = document.createElement('video');
var displayedHeight=500;
if(videoObj.canPlayType(fileType)) {
  videoObj.setAttribute('id','inputVideo');
  videoObj.setAttribute('src', b64Str);
  videoObj.setAttribute('height', displayedHeight);
}

注意b64Str是前面步驟中FileReader()讀取的視頻文件數(shù)據(jù)。

第二部分，幀提取——每個(gè)視頻幀都指的是剪輯在唯一時(shí)間戳的圖像快照。

由于 GIF 文件是通過(guò)合并一組連續(xù)的圖像創(chuàng)建的，因此，對(duì)于視頻的每一次時(shí)間圖形更新，都需要提取一個(gè)嵌入了圖像數(shù)據(jù)的幀，用于后續(xù)的 GIF 創(chuàng)建過(guò)程。

雖然不能直接從 DOM 元素 <video></video> 中提取每個(gè)視頻幀所需的圖像數(shù)據(jù)，但可以將 <video></video> 中的預(yù)覽內(nèi)容渲染到 <canvas></canvas> 元素上幀圖像數(shù)據(jù)提取。

接下來(lái)，在 JavaScript 中創(chuàng)建一個(gè) <canvas></canvas> 元素并為其分配相應(yīng)的屬性（類似于 <video></video>）：

var vidHeight=videoObj.videoHeight;
var vidWidth=videoObj.videoWidth;
var bitmap = document.createElement('canvas');
bitmap.setAttribute('id', 'bitmap');
bitmap.setAttribute('width', vidWidth);
bitmap.setAttribute('height', vidHeight);

請(qǐng)注意，vidWidth 和 vidHeight 是從 <video></video> 檢索的。（這些是剪輯的原始尺寸。）

接下來(lái)的幾行代碼基于標(biāo)記到每個(gè)元素的 'id' 屬性來(lái)引用<video></video> 和 <canvas></canvas>：：

const inputVideo=document.getElementById('inputVideo');
const bitmapCanvas=document.getElementById('bitmap');
const bitmapCtx = bitmapCanvas.getContext('2d');
inputVideo.muted = true;
inputVideo.loop = false;
inputVideo.autoplay=true;
const background = () => {
  bitmapCtx.fillStyle = '#FFFFFF';
  bitmapCtx.fillRect(0, 0, vidWidth, vidHeight);
};

由于視頻設(shè)置為自動(dòng)播放，當(dāng)播放事件被發(fā)出時(shí)，這會(huì)觸發(fā) background() 的執(zhí)行，它不僅將 GIF 背景填充為白色，而且還設(shè)置了繪制到 canvas 元素上的每一幀的尺寸：

const step = async() => {
  let bgStatus=await background();
  await new Promise(resolve => {
    bitmapCtx.drawImage(inputVideo, 0, 0, vidWidth, vidHeight);
    frameB64Str = bitmapCanvas.toDataURL();
    resolve();
  });
  window.requestAnimationFrame(step);
};
inputVideo.addEventListener('play', () => {
  step();
  window.requestAnimationFrame(step);
});

window.requestAnimationFrame(step) 接受一個(gè)回調(diào)函數(shù)（即step()）來(lái)處理每一幀的圖像數(shù)據(jù)。

bitmapCtx.drawImage() 繼續(xù)將每個(gè)圖像快照渲染到畫布上，以便 bitmapCanvas.toDataURL() 返回每個(gè)快照的 base64 編碼圖像。

步驟（3）：依次合并所有圖像快照

最后實(shí)現(xiàn)了JS插件GIFEncoder.js。使用與上面相同的代碼片段，以下粗體代碼行指的是 GIFEncoder 編碼器捕獲嵌入在 <canvas></canvas> 中的每個(gè)數(shù)據(jù)幀的實(shí)例。

const encoder = new GIFEncoder(vidWidth, vidHeight);
encoder.setRepeat(0);
encoder.setDelay(500);
const step = async() => {
  let bgStatus=await background();
  await new Promise(resolve => {
    bitmapCtx.drawImage(inputVideo, 0, 0, vidWidth, vidHeight);
    frameB64Str = bitmapCanvas.toDataURL();
    encoder.addFrame(bitmapCtx);
    resolve();
  });
  window.requestAnimationFrame(step);
};
inputVideo.addEventListener('play', () => {
  encoder.start();
  step();
  window.requestAnimationFrame(step);
});

當(dāng)上傳的視頻最終播放完整時(shí)長(zhǎng)時(shí)，應(yīng)在 GIFEncoder 調(diào)用方法 finish() 的地方發(fā)出結(jié)束事件：

inputVideo.addEventListener('ended', () => {
  encoder.finish();
});

步驟 (4)：通過(guò) GIFEncoder 創(chuàng)建 GIF

要從編碼器中提取所有幀的合并版本（即 GIF 輸出），需要實(shí)現(xiàn)以下 JavaScript 代碼片段：

var fileType='image/gif';
var readableStream=encoder.stream();
var binary_gif=readableStream.getData();
var b64Str='data:'+fileType+';base64,'+encode64(binary_gif);

encode64() 是 b64.js 中的一種方法，用于將 GIFEncoder 捕獲的流數(shù)據(jù)轉(zhuǎn)換為 Base64 格式。

b64Str 通過(guò)合并 GIFEncoder 中存在的所有幀來(lái)引用為 GIF 文件編碼的數(shù)據(jù)。因此，在 HTML 代碼中，繼續(xù)包含：<img id='outputGif' src='${b64Str}' alt='${fileName}' />以預(yù)覽輸出 GIF 文件。

最后創(chuàng)建一個(gè)GIF文件的下載鏈接，如下：

let dwnlnk = document.createElement('a');
dwnlnk.download = fileName;
dwnlnk.innerHTML = ` <small>Save</small>`;
dwnlnk.className = 'btn btn-outline-dark';
dwnlnk.href = b64Str;

僅供參考：完整的放在我的 GitHub：video-to-GIFhttps://github.com/incubated-geek-cc/video-to-GIF

總結(jié)

雖然，有進(jìn)一步探索 GIFEncoder.js 中輸出 GIF 文件的可定制調(diào)整的空間，但本文介紹的是一種基本的輕量級(jí)方法，該方法可以完全在瀏覽器中和純客戶端將視頻剪輯轉(zhuǎn)換為 GIF 文件。

- End -

在線咨詢

上一篇：Html基本的四個(gè)實(shí)例標(biāo)簽
下一篇：頁(yè)面不受客戶字體安裝限制，CSS3的服務(wù)器端字體，使用起來(lái)很方便

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

3種Javascript圖片預(yù)加載的方法詳解

方法二：僅使用JavaScript實(shí)現(xiàn)預(yù)加載

方法三：使用Ajax實(shí)現(xiàn)預(yù)加載

您的項(xiàng)目需求