Never Ever - javascript で存在しない画像を消す

備忘録

備忘録 : javascript で存在しない画像を消す

投稿者 : wye 投稿日時： 2009-01-16 11:50:49 (1436 ヒット)

HTML の IMG タグの SRC に存在しない画像を指定した場合、IE などでは「×」印がでてしまいます（alt タグを書いておいても IE では×印はなくなりません）。それを画像などの読み込みに失敗したときに発生するイベント「onError」を使ってIMG タグ自体を消してしまう方法が以下です。
（応用で代替画像を表示することも可能）

<div id="img1" class="img_div">
<img src="../../parts/ktai_imgs/200901docomo.jpg" onError="document.getElementById('img1').innerHTML='';" />
</div>


<div id="img2" class="img_div">
<img src="../../parts/ktai_imgs/200901docomo_none.jpg" onError="document.getElementById('img2').innerHTML='';" />
</div>


<div class="img_div">
<img src="../../parts/ktai_imgs/200901docomo_none.jpg" />
</div>

↓コメントで教えてもらったものを追記しました
<div class="img_div">
<img src="non_exist.jpg" onerror="this.parentNode.removeChild(this)"> 
</div>

<style type="text/css">
<!--
.img_div { padding:3px; border:1px solid #999; width:106px; height:146px; text-align:center; margin:6px; }
-->
</style>

↓以下の画像部分は、このように書いてあります↑。（比較するため枠をつけてあります）

↓コメントで教えてもらったものを追記しました

1つ目は画像が存在しているので、onError が働かない（所謂普通に画像が表示されます）
2つ目は画像が存在していないため、onError で img タグが消されています。
3つ目は画像が存在していないため、IE では×印が表示されます（onError設定なし）。

プログラムなどで抽出したデータを表示しなければならない時に使えるかな？
PHP とか使って判定しちゃえばこんなことすることないけどネ（でもPHPでやるより簡単！）

2コメント

備忘録