最近在撰寫的專案,常常會使用 canvas 來處理圖片合成,canvas 在合成圖片時必須確保圖片已經被載入,否則會產生空白圖片。

如何確保操作在圖片載入後

所以,該如何確保圖片已經被載入後,再進行下一個操作?

大部分的時候,我們會使用 new Image() 在 JavaScript 中產生 HTMLImageElement,然後在屬性 onload 中設定圖片載入後要執行的操作。如下:

var image = new Image()
image.onload = function () {
  // ... 在圖片載入後要進行的操作 ...
}
image.src = 'https://www.google.com/favicon.ico'

上方的程式碼在 https://www.google.com/favicon.ico 載入成功(status < 400)時,就會執行 onload 所設定的函式。

值得注意的是 image.onload = 的敘述語句必須放在 image.src = 之前,如果寫為下方的形式:

image.src = 'https://www.google.com/favicon.ico'
image.onload = function () { /* ... */ }

在圖片沒有被 cached 的情況下,onload 會正常被執行,不過如果圖片已經被 cached,在 Safari 上則不會執行 onload 所設定的函式。

圖片是否已經被載入

另一種常見的情境,如果程式碼中要使用到圖片,但是該程式並不會馬上執行,我們也會提前將圖片注入到 markup 之中,確保程式需要用到該圖片前,馬上就可以使用,而不需要等待下載時間。

在這種情況下,如果我們依舊使用上方的方式,程式並不可靠,因為如果圖片在程式碼 .onload 執行之前就被載入,則 .onload 的回調永遠不會被觸發。

// 頁面上放置 <img src="https://www.google.com/favicon.ico">

// ... https://www.google.com/favicon.ico ...載入完成

// 執行下方程式碼
var image = new Image()
image.load = function () { /* 這裡永遠不會被執行到 QQ */ }
image.src = 'https://www.google.com/favicon.ico'

要解決這個問題,可以使用 complete 這個屬性,如果圖片已經被載入 complete 會被設定為 true

/* <img id="preload-image" src="https://www.google.com/favicon.ico"> */

var preloadedImage = docuemnt.getElementById('preload-image')

console.log(preloadedImage.complete)
// => true: 已經載入, false: 未載入

值得注意的是,complete 屬性在 IE9 上才開始支援,IE8 以下的話,則必須在圖片載入的那一刻,自行記錄該圖片已經被載入了。

圖片載入函式

在實際的應用當中,我們可以寫一個函式,同時適應上述「圖片上尚未載入」以及「圖片已經載入」兩個情境,方便在各個地方複用。

function onImageLoaded(url, cb) {
  var image = new Image()
  image.src = url

  if (image.complete) {
    // 圖片已經被載入
    cb(image)
  } else {
    // 如果圖片未被載入,則設定載入時的回調
    image.onload = function () {
      cb(image)
    }
  }
}

onImageLoaded('https://google.com/favicon.ico', function (icon) {
  console.log('Google 的 Favicon 載入完成啦!')
})

有些人可能注意到,上方的程式碼,.src 敘述在 .onload 之前,在 Safari 中會不會產生上面提到的問題呢?答案是不會。因為假如圖片已經被載入,complete 屬性就會變成 true,也就是在第一個條件式就已經先處理了。

結論

圖片載入的判斷,除了我遇到的 canvas 合成圖片必須確保載入完成,還可以被使用在圖片 Lazy load 的實作上,應該是很常需要使用到的小知識啦,紀錄一下總是好的。

不過為了精簡文章的主題,圖片載入錯誤的情況就被略過,這也是需要小心的地方,也許改天可以開一篇文章專門來寫圖片載入的錯誤處理呢!