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
に限った話じゃないような気がする。