画像の有無の判定

質問

こんばんは。
どうしてもできなくて困っています。
過去の質問を遡ってみたのですが、
同じようなものがなかったので質問させていただきます。
（過去に同じ質問があったらすみません。）

タイトルのとおりなんですが、
AとBの2枚の画像があるとします。

index.html内にアクセスしたときに、
基本的にはAを表示させて、もし画像Aがみつからなかったら
画像Bを表示するようにしたいのですが…

javascriptをはじめたばかりでして何もできない状態です。

画像Aを表示
else画像Bを表示

のような命令になると思うのですが、
どなたかご教授して頂けませんでしょうか。

基礎のない状態ですといきなりこういったものを
作るとなると厳しいものがありまして。。

宜しくお願い致します。

回答No.1

noname#78238

一番簡単なのは、imgタグにonErrorイベントを設定する方法です。
<img src="画像AのURL" alt="" onError="this.src='画像BのURL'" />

onErrorイベントは、読み込む画像が存在しない時に呼び出されます。

imgタグは、画像Aを読み込もうとする
↓
画像Aが存在しない
↓
onErrorイベントが発動
↓
自分自身のsrc属性 (this.src) を、画像BのURLに変更
↓
画像Bを読み込む

どのような状況で使うのかが分かりませんが、JavaScriptが無効の場合は画像が表示されませんので、最初から画像Aが存在しない場合を想定できるのなら別の方法を取った方が良いのかもしれません。
以下は、別の方法の例です。

// これ以降は、コメントです。

<script type="text/javascript">
// imgタグを生成
var gazo = document.createElement("img");

// imgタグにsrc属性を設定
gazo.setAttribute("src", "画像AのURL");

// imgタグにalt属性を設定
gazo.setAttribute("alt", "画像Aの説明");

// onerrorイベントを設定
gazo.onerror = function() {
// imgタグのsrc属性を変更 (画像Bも存在しない場合、onerrorイベントがループしてしまうので注意が必要です)
gazo.setAttribute("src", "画像BのURL");

// imgタグのalt属性を変更
gazo.setAttribute("alt", "画像Bの説明");
};

// 画像をbodyタグに追加する (DOMを検索してみて下さい)
document.body.appendChild(gazo);

// document.getElementsByTagName("body").item(0) ...
// element.addEventListener(...);
</script>
<noscript>
...
javascriptが無効の場合
...
</noscript>

頑張って下さい。

参考URL：

http://www.openspc2.org/JavaScript/reference4/