Firefoxで読み込みに失敗した画像を表示するには

Read More

Firefoxで開発を行っていて困っていた点が一つある。


Firefoxでは読み込みに失敗した画像が本当に何も表示されない点だ。
# IEだと画像が読み込めなかったらそこに×印がつく


このため、自分がFirefoxで開発している時には画像が表示されていないことに気がつかないままに、
他の人がIEなどでページを確認して初めてそのタイミングで画像が読み込まれていないことに気がつく。


このようなことがしばしば起こる。


画像の読み込みに失敗する原因はいくつかあるが、主に、
パスが変わってしまったことによる画像の行方不明(Missing Image),
画像の破損(Damage Image, Broken Image)などがある。



読み込みの失敗した画像に気がつかないままリリースしてしまっては今後の信頼性にもかかわるのでなんとかしたい。

でも解決するためのズバリなaddonはなかった。何年も。


けど、そろそろいい加減頭にきたので別の方法でアプローチしてみることにした。


そうするとこんな感じに表示されるようになった。


本来表示されるべき画像


その画像がなんらかの原因で表示できないとき




以下にその手順を記しておく。


具体的にはStylishというアドオンを利用する。
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/


まずこのアドオンをインストールしておく。


次に、メニューからツール(T)->アドオン(A)を選択しアドオンマネージャのページを表示させる。


"拡張機能"からStylishの設定ボタンを押下する。



設定画面が表示されたら"新しいスタイルを書く(W)"を押下。



新しいスタイルを入力する画面が表示されるので、
名前を
show missing (damage, broken) image
とし、

スタイルシートに
img:-moz-broken:before{
border: 1px dotted #ff0000;
padding: 0px 6px;
}

と記述し"保存"ボタンを押下。



すると図のようにスタイルが登録されたのが確認できる。



これで設定は終わり。

あとは実際に読み込みが失敗したページを表示してみたらよい。




これで読み込み失敗した画像を見逃すことも減るだろう。




--
最後に、この設定による弊害もあったのでそれも書いておく。


Firebugを開いたら変な所にスタイルが適用されていた。



…ま、いっか。



Comments(3)

1  115ちゃん  2012/03/16 (金) 10:57 ID:XXXXXXXXX
さっそく導入!!
あざっす!!

2  とっとり  2012/03/16 (金) 12:33 ID:XXXXXXXXX
いつも貴重な情報をありがとうございます^^

3  シラサヤ  2012/03/16 (金) 13:00 ID:XXXXXXXXX
^^