Web ページ中の画像が読み込めなかった時に処理させる

Web ページ中の img 要素が画像を読み込めなかった場合、Error イベントが発火することを知った。

つまり、onerror 属性などで Error イベントを拾ってやれば、その img 要素を目立たせたりとか、要素ごと削除したりとか、好きな処理ができるというワケだ。開発中に画像がちゃんと貼れているか確認したり、画像リンクが切れているところをログに残したりできるだろう。

目次

• サンプル
• onerror 属性を書いてみる
• JavaScript で一括指定する

サンプル

以下にサンプルを作ってみた。

• デモ : 読み込みに失敗した画像を処理する
• コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

onerror 属性を書いてみる

まずはシンプルに、img 要素に onerror 属性を書いてみる。

<img src="not-found.jpg" onerror="this.style.border = '5px solid red';">

以下のように DOM 操作してやれば、img 要素を削除できる。

<img src="not-found.jpg" onerror="this.parentNode.removeChild(this);">

JavaScript で一括指定する

実際は HTML 中に onerror 属性を書くのは気が引けるので、JavaScript 側だけで一括処理するようにする。

// window.onload 前に処理を入れておく
document.addEventListener('DOMContentLoaded', () => {
  // ページ中の img 要素を全て取得する
  const imgElems = document.querySelectorAll('img');
  for(const imgElem of imgElems) {
    // 各 img 要素に Error イベント時の処理を付与する
    imgElem.addEventListener('error', (event) => {
      // ココでは枠付けするようにしたが、要素の削除などにしても良い
      imgElem.style.border = '5px dashed red';
    });
  }
});

こうすれば、読み込めなかった画像の情報を console.log() に出すなどの処理も自由に変更できるだろう。querySelectorAll() の範囲を狭めて、確認したい箇所の img 要素だけをピックアップするようにしても良い。

このように、画像読み込みエラーを割とサクッとチェックできるのでオススメ。

• 参考 : javascriptで死んでる画像をうまいことする - Qiita