画像拡張子
-
0 名前： track7 ： 2006/03/15 20:06
- q.gifという画像を読み込ませるイベントを発生させたとき
q.pngしかないとき、自動的にq.pngに切り替えて読み込みを
成功させたいのですが、書き方がわかりません。
よろしくお願いします。
-
1 名前： 神崎 ： 2006/03/15 20:06
- <img src="q.gif" id="img1" name="img1" onError="this.src='q.png';">
IE系では、
q.gifの読み込みに失敗したとき（ファイルがないときなど）にq.pngを読み直します。
GeckoではファイルがないときでもonErrorが呼ばれないので、読み直しが出来ません。
document.img1.completeを調べても、Geckoでは常にtrueになっていますので、
私にはGeckoで画像が読めなかったときの処理方法がわかりません。
-
2 名前： track7 ： 2006/03/15 20:06
- 神崎さん ありがとうございます。
IE以外の他のブラウザの対応もお書きいただき大変参考になります。
そういうブラウザの場合はaltでフォローなのでしょうね。
あと小出しで申し訳ないのですが、背景画像の読み込みのときは、
arc属性ではありませんよね。背景ではどうやったら代替画像を表示
させられるのでしょうか。もしお分かりでしたら、こちらもお願いで
きますでしょうか。
-
3 名前： Pid ： 2006/03/15 20:06
- 同一ドメインならば，XMLHttpRequest でリソースが存在するかどうかチェックできます。
※最悪，隠しフレーム（あるいは object/iframe 動的生成）でもできなくはないかと。
-
4 名前： track7 ： 2006/03/15 20:06
- Pidさん、ありがとうございます。
あ、そうなんですか。おもしろそうですね。
ちょっとかじってみますｗ
-
5 名前： あおい ： 2006/03/15 20:06
- // Imageオブジェクトを作成
testImg = new Image();
// testImg に q.gif を読み込む
testImg.src = "q.gif";
// q.gif の読み込みに失敗した場合、imageFailure を実行する
testImg.onerror = imageFailure;
// q.gif の読み込みに成功した場合、imageLoaded を実行する
testImg.onload = imageLoaded;
// ↓読み込みに失敗した場合に呼ばれるfunction
function imageFailure(){
// q.png を testImg に読み込み直す
testImg.src = "q.png";
// loadTestImg に q.png をセットする
document.images["loadTestImg"].src = testImg.src;
}
function imageLoaded(){
document.images["loadTestImg"].src = testImg.src;
}
<img src="blank.gif" name="loadTestImg" border="1">
q.gif を表示させて起きたいところにはあらかじめ存在する透明gifを読み込んでおく。
この方法で、IE6、FireFox 0.8、Netscape 7.1 では成功しました。
（ブラウザ、ちょっと古いけど）
上の処理だけでは若干手直しは必要ですが、
JavaScriptだけでやりたいのであれば、こういうフィーリングではどうでしょうか。
-
6 名前： Pid ： 2006/03/15 20:06
- >>5
なるほど，良いですね！ ただ，
・Safari では，Image オブジェクトは HTMLImageElement ではない（それゆえ onload や onerror などを参照できない）
→ document.createElement('img') の方が良い？これで先読みできるか？
・error イベントが img 要素で発生する保証がない（http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents
）
→ 仕様の記述の方がおかしい気もするので，この際，目をつむる (^^;)？
という点が気になりましたが，いかがでしょう。
なお，NN4 対応を考えるのでなければ，img 要素に name 属性を付ける必要はないと思います（むしろ id 属性）。
