Categories: JavaScript

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

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

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

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

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

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

HTML

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

js

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="サンプル画像">

js

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

【解説】なぜloadだとダメなのか

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


処理順序1
ユーザがWebページを開く

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

処理順序2
画像読み込み開始

Webページ内の画像が読み込まれます。この時点で画像の読み込み処理は成功または失敗しています。

処理順序2
イベントリスナの登録

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


重要!

loadは、HTMLの解析と画像読み込みの両方が完了してから処理を実行します。
つまり、loadの場合は、イベントリスナを登録する時点で既に画像の読み込みが完了している(成功か失敗かにかかわらず)ため、イベントリスナ登録前の出来事はキャッチできないということです。

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp