最近ウェブサービスも作ってて、ブラウザ毎の挙動の違いに四苦八苦してます。
その中で、画像取得の件でちょっと調べたので、自分のためにメモ
(プログラマーでもデザイナーでもない人は、読み飛ばした方がいいかもですｗ)
リンク切れ画像の場合、こんなjQuery書いたらリンク画像が差し替えられる
(↓実際のこのコードはリンク画像差替えでなく、画像を非表示にしています
×印の画像を出力したくなかったのです)みたいな話があります。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").error(function(){
$(this).hide();
return true;
});
});
</script>
そこでさくっとやってみたのですが、肝心のIEではこれがうまくいかず、
×マークの画像が表示され続けます。これが結構はまりました。 汗
調べたところ、IEは画像が取得できなくてもerroｒを出さない事があるんですね。。
そこで、IE用に、jQueryでなくjavascriptを下記のように書きました。
一部の画像はこれでうまくいきました。
.onerrorだけでなく、.onabort(中断)にも反応することである程度は
対応できたんです。
<script type="text/javascript">
window.onload = function load() {
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
var img = document.getElementsByTagName('*');
for (var i=0; i<img.length; i++){
if(img[i].className=='hoge'){
img[i].onerror = function() {
img[i].style.display='none';
}
img[i].onabort = function() {
img[i].style.display='none';
}
}
}
}
};
</script>
でも、これでもちょっと中途半端でした。。
IEは再読み込みしたり、読み込みタイミングによっては
.onerrorにも、.onabortにも、.onload(読み込み終了)にも
反応しないらしいのです。
確かに一部の画像は全然×マークが消えませんでした。
どーしたらいいねん！と調べまくったら下記の記述で
なんとか対応できました。。
<script type="text/javascript">
window.onload = function load() {
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
var img = document.getElementsByTagName('*');
for (var i=0; i<img.length; i++){
if(img[i].className=='hoge'{
if(img[i].complete == false ){
img[i].style.display='none';
}
}
}
}
};
IEではonerror等々に対応してないので、画像を取得していないのは、
「.complete == false」で判断したらいいようです。
ようやくすっきりしました。