ところが親切設計の IE や Chrome では、画像が見当たらないとそれ専用のアイコンを表示してしまいます。
これで困ったのが、画像リンクを利用してスクリプトを走らせるハックを使うアクセス統計サービスの場合。
きちんと表示されれば問題なく img タグだろうとなんだろうと構わないわけですが、ところがサーバーの都合でスクリプトが動かないという状況が発生。
動かないだけ「画像ありません」というアイコンかしっかり表示されてしまいました。
アクセス統計などアナリティクスに任せとけばいいのに、マイナーブランドなど使うからサーバーの都合で対応をせざるを得ないはめに。
そこで、画像切れリンクは問答無用で「表示しない」という方針といたしました。これで振り回されずにすみます。
本題へ。リンク切れ画像の IE と Chrome 対応策です。
img タグのすべての要素を取り出し、画像読み込みが終らないものをすべて非表示とすればよいようです。
$(function(){
$('img').each(function(){
if(!this.complete){
$(this).hide();
return;
}
});
});
