【JavaScript入門】Webページで画像の読み込みに失敗したこと検知する方法

この記事では、Webページで画像の読み込みに失敗したことを検知して何か処理する場合のサンプルについて解説しています。

OK例）DOMContentLoadedイベントの中に処理を記述する
- 【解説】なぜDOMContentLoadedだと上手くいくのか
NG例）loadイベントの中に処理を記述する
- 【解説】なぜloadだとダメなのか

OK例）`DOMContentLoaded`イベントの中に処理を記述する

次のサンプルを見てください。
「Run Pen」をクリックすると、サンプルページが開きます。
わざと画像の読み込みに失敗するようにしているので、img要素のalt属性の値がアラートに表示されるようにしています。

See the Pen
mdWpLJx by shiakisudev (@shiakisu)
on CodePen.

以下はこのサンプルのソースです。

HTML

<img id="gazo" src="sample.png" alt="サンプル画像">

window.addEventListener('DOMContentLoaded', function(){
    document.getElementById('gazo').addEventListener('error',function(e){
      alert(e.target.alt);
    })
});

【解説】なぜ`DOMContentLoaded`だと上手くいくのか

DOMContentLoadedイベントを定義した場合、Webページを開くと以下の順序で処理が進むからです。

処理順序1

ユーザがWebページを開く

ユーザがWebページを開くとHTMLの解析が始まります。HTMLの解析が完了した時点では画像はまだ読み込まれていません。

処理順序2

イベントリスナの登録

DOMContentLoadedが実行され、イベントリスナが登録されます。登録後、画像の読み込み失敗をキャッチできるようになります。

処理順序3

画像読み込み開始

Webページ内の画像が読み込まれます。この時点で読み込みに失敗した画像は、処理順序2で登録したイベントリスナがキャッチし、イベントリスナ内の処理が実行されます。

重要！

DOMContentLoadedは、画像の読み込みを待たずに処理を実行します。
つまり、先に画像読み込み失敗時のイベントリスナを登録しているので、イベントリスナ登録後に画像読み込みが失敗すれば、それをイベントリスナで拾えるというわけです。

NG例）`load`イベントの中に処理を記述する

次のサンプルはNG例です。
「Run Pen」をクリックすると、サンプルページが開きます。
画像の読み込みは失敗しますが、それをイベントリスナ内でキャッチすることはできません。

See the Pen
XWMVqEp by shiakisudev (@shiakisu)
on CodePen.

以下はこのサンプルのソースです。

HTML

<img id="gazo" src="sample.png" alt="サンプル画像">

window.addEventListener('load', function(){
    document.getElementById('gazo').addEventListener('error',function(e){
      alert(e.target.alt);
    })
});