知っていて損はない!?画像が読み込めなかったら別の画像を表示するjavascript!
今回はそんなこと使うときある??みたいなものを紹介します。
とはいえ一定の需要はあると思います。
通常は画像が読み込めない場合は、これまたあまり実際にはお目にかかれないaltの文字列が表示されますね。
こんな時に文字列じゃなくてちゃんと「No image」とかの画像にしたいよ!ってパターンはあるんじゃないかと思います。
実際に僕はありました!!
なのでご紹介します。
プログラミングやWordPressを習得するのに一番近道な方法とは?
javascriptのonErrorイベントを使っちゃう!
早速サンプルコードを書いちゃいますね。
1 | <img src="hoge1.png" onError="this.src='hoge2.png'"> |
hoge1.pngが読み込めなかった場合にhoge2.pngが表示されます。
onErrorはエラーが起こった際のイベントなので、下記みたいにアラートを入れ込んだりももちろんできますよ。
1 | <img src="hoge1.png" onError="this.src='alert('画像が読み込めなかったよ!')'"> |
誰かの役に立つのなら嬉しいです!