imageのloadイベントが呼ばれない時がある!?

はじめに

画像は比較的容量が重く、描画までに時間がかかることが多々あります。
画像が表示されるまでのその空間を補うだけでだいぶUXが良くなることがあるのですが、画像の読み込みも容量によってまちまちなので結構管理も面倒な時があります。
いくつか読み込みのステータスをチェックする方法があるのですが、今回はimageのloadイベントに関してとその注意点についてまとめてみました。

loadイベントとは？

imageのloadイベントは、その画像の読み込みが完了したタイミングに発生するイベントになります。
読み込み中にダミーイメージやインジケーターを表示する際の、出し分けをloadイベントで管理したりします。

let image = new Image();
image.src = 'https://dummyimage.com/600x400/000/fff';

image.addEventListener('load', function() {
  // 画像の読み込み完了時の処理
  console.log('画像が読み込まれました！');
});

loadイベントの注意点

ブラウザは一度ダウンロードされた画像をキャッシュに保存します。次回同じ画像が要求された場合、ブラウザはネットワーク経由ではなく、キャッシュから画像を読み込みます。
注意点は、キャッシュによって画像がロードされた場合、loadイベントは発火しないことです。

例えば、画像の読み込みが完了するまで必ずインジケーターを表示し、その出し分けをloadイベントで管理する場合、画像がキャッシュされている時には、インジケーターが消えないという事象が起こります。
なのでloadイベントは、画像の初回読み込みを対象する処理には使えそうです。

ではページに訪れる度に画像の読み込み状況を見たい時はどうするか。
キャッシュ済みか否かに問わず、読み込み状況を監視したい時はimageのcompleteプロパティを活用できそうです。

imageのcompleteプロパティで読み込み完了をチェックする

imageのdomに対してアクセスしてみると、completeプロパティが生えています。
画像の読み込みが完了したタイミングでcomplete: trueになるため、このプロパティの値を見て、読み込み状況を確認します。

<img src='https://dummyimage.com/600x400/000/fff' id="test_image">

const img = document.getElementById('test_image');
console.log(img.complete); // true or false

最後に

ユーザー投稿型のサービスとかでは大きい容量のイメージを描画する可能性があるので、読み込み完了の監視は入れることが多いですよね。
その際には、是非上記の内容参考に実装してみてください！