タイトルのとおり、imgタグのsrcにいれた画像リンクがなければ自動的にダミー画像に置き換える方法を紹介。
ただ実際に作ってみると思ったようにいかなくて、回りくどくなってしまいました。
以下は、画像がなければPlacehold.jpの画像を表示する例です。なお、Placehold.jpの画像を使う場合は、widthとheightの指定が必要なのでそれだけ注意(今回は試しにjsdo.itを使ってみました)。
『play』ボタンを押すと、左3つの画像が一瞬何もない状態になった後、Placehold.jpのダミー画像が表示されると思います(もしかしたら、最初からPlacehold.jpのダミー画像が表示されるかもしれませんが)。
左から、『widthとheight属性て幅を指定した画』『CSS側でwidthとheightを指定した画像』『widthとheightの指定をしていない画像』『存在する画像』です。
8~12行目の処理は必要なの？ と思われる人もいると思いますが、このスクリプト内の処理が行われる前に、画像の存在可否が判定されてしまうと、2~7行目で指定した画像がない場合に実行する処理を実行してくれないので、必要です。
“dammyImage”というクラスを追加しているのは、ダミー画像もない場合にループが発生してしまう可能性があるので、その対策用です。
CSSの”-moz-force-broken-image-icon: 1;”というのは、Firefox用の対策。これを指定していないと、Firefoxではheightの指定があるなしに関わらず、heightは17pxとなってしまうよう(Placehold.jpを使うわけでなければ必要ない)。
参考：Firefoxで画像がない時の表示を分かりやすくする at softelメモ
コメント