HTMLImageElementのloadイベントをキャッチできないケースがある

document.querySelector('img')などでHTMLImageElementを取得して、loadイベントのリスナーを追加してもイベントをキャッチできず画像が読み込まれたか分からんというケースに遭遇したので、対処方法からなぜそうなるのかについて書きました。

原因

画像の方が先に読み込まれてしまったことで、loadイベントのリスナーを追加する前にloadイベントが発火したがゆえに、イベントをキャッチできなかったことが原因です。

一番最初、キャッシュされた画像のみloadイベントでキャッチできなかったので、キャッシュに悪さされてるのかと思ってました。

対処方法

loadイベントのリスナーを追加する前にHTMLImageElement#completeを見ることで、画像が既に読み込まれているかを確認できるので、それを利用するといいでしょう。

const img = document.querySelector('img')

if (img.complete) {
  console.log('画像は既に読み込まれています。')
} else {
  console.log('画像はまだ読み込まれていません。')
  img.addEventListener('load', () => {
    console.log('画像が読み込まれました。')
  })
}

HTMLImageElement#complete の罠

MDNを見てみると、画像の読み込みが完了したと見なされるケースが、先に読み込まれた場合だけはないことにも注意する必要がありそう。

余談

これ別にHTMLImageElementに限った話じゃないような気がする。