JavaScriptのonErrorで画像を非表示にする

外部のサイトの画像を表示する際に、画像が表示されなかったらその画像を非表示にする必要があり、JavaScriptのonErrorを使って実現できることがわかりました。

例えば、下記のようなソースコードがあったとして、test.gifがサーバから削除されていた場合に100×100のサイズでブランクまたは×等の表示になってしまいます。

<img src="http://takahitokikuchi.poitan.net/test/test.gif" width="100" height="100" alt="test" />

そこで、ソースコードを次のように書き換えます。

<img src="http://takahitokikuchi.poitan.net/test/test.gif" onError="this.style.display='none';" style="display:block;" width="100" height="100" alt="test" />

これでtest.gifが消えていたら、<img>そのものが非表示になりますので、100×100のブランクは表示されなくなります。


↓onErrorを入れた場合
test


↓onErrorがない場合
test


  • このエントリーをはてなブックマークに追加
  • 「ポイント・マイル」ブログランキング参加中
  • にほんブログ村 小遣いブログ マイレージへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください