使用new Image()進行預加載

概述

這篇博文記錄了用new Image()進行預加載的總結，供以后開發時參考，相信對其他人也有用。

舊的預加載

一般我們為了讓背景圖更快的加載，我們常常把背景圖放在一個display:none的img標簽里面進行預加載，如下面代碼所示：

<div class="preload" style="display: none;">
    <img src="bg1.jpg" alt="緩存">
    <img src="bg2.jpg" alt="緩存">
    <img src="bg3.jpg" alt="緩存">
</div>

如果bg1.jpg用在background里面，就會等到下載完css然后解析到background才會進行加載，但是如果在html里面寫上了上面的代碼的話，就會在加載完html並解析到上面代碼的時候直接加載。

new Image()

利用上面的方法我們並不能控制圖片什么時候加載，但是 如果用new Image()的話，就可以用js控制在什么時候加載圖片，比如執行js的時候就加載啊，onload事件之后再加載啊，加載完頁面之后2s再加載啊之類的。代碼如下：

new Image().src = 'bg1.jpg';
new Image().src = 'bg2.jpg';
new Image().src = 'bg3.jpg';

加載其它資源

令人驚喜的是，利用new Image()不僅能夠加載圖片，還能夠加載css和js，寫法和上面差不多：

new Image().src = 'util.css';
new Image().src = 'haha.css';
new Image().src = 'util.js';

加載完成

如果需要的話，我們還可以加一個加載完成的事件，在加載完成的時候執行一個回調函數。如下面的代碼所示：

let count = 0;
const a = new Image();
a.src = 'util.css';
const b = new Image();
b.src = 'haha.css';
const c = new Image();
c.src = 'util.js';

a.onload = function() {
    count++;
}

b.onload = function() {
    count++;
}

c.onload = function() {
    count++;
}

其它

值得一提的是，new Image()的方法在FF瀏覽器里面會有不同的實現，如果要兼容FF的話，需要作出一些調整，具體可以參考js的new Image()做圖片預加載。