Corredor

ウェブ、プログラミングの勉強メモ。

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

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

Webデザイン良質見本帳  目的別に探せて、すぐに使えるアイデア集

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

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

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

サンプル

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

See the Pen 読み込みに失敗した画像を処理する by Neos21 (@Neos21) on CodePen.

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 要素だけをピックアップするようにしても良い。


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