☰

JavaScript で画像の読み込みに失敗した場合に検出する 質問する

tag-icon • tag-icon javascript image
JavaScript で画像の読み込みに失敗した場合に検出する 質問する

画像パスが実際の画像につながるかどうかを判断する方法、つまり、JavaScript で画像の読み込みに失敗したことを検出する方法はありますか。

Web アプリでは、xml ファイルを解析し、画像パスのリストから HTML 画像を動的に作成しています。一部の画像パスはサーバー上に存在しない可能性があるため、読み込みに失敗した画像を検出し、その HTML img 要素を削除することで、適切に失敗したいと考えています。

jQuery ソリューションは使用できません (上司は jQuery を使いたくないのですが、はい、わかっています。話を始めないでください)。jQuery で画像が読み込まれたかどうかを検出する方法は知っていますが、失敗したかどうかは知りません。

img 要素を作成するコードですが、img パスが画像の読み込みに失敗したかどうかをどのように検出できますか?

var imgObj = new Image();  // document.createElement("img");
imgObj.src = src;

ベストアンサー1

次のコードを試すことができます。ただし、ブラウザの互換性については保証できませんので、テストする必要があります。

function testImage(URL) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=URL;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

そして、jQuery に抵抗のある上司に同情します!

おすすめ記事