###前提・実現したいこと

jQuery、javascriptにて、
画像が404エラーの場合、noimg.jpg を出したいです。

###発生している問題・エラーメッセージ

IEで、作動しません。
Firefoxでは、基本的に作動しますが、何回かに1回は作動しません。
.error(function()は、IEでは作動しないものなのでしょうか。
解決策や代替案があれば教えていただきたいです。
よろしくお願い致します。

###該当のソースコード

javascript
1<script>
2   $("img").error(function(){
3      $(this).attr({
4         "src":"noimg.jpg"
5      });
6   });
7</script>

行動規範の内容に同意します

回答2件

ベストアンサー

loadやerrorは廃止の方向だったような・・・
on('error')ならIE10以上で対応していると思います

$(function(){
  $('img').on('error',function(e){
  });
});

追記

なんどか再読込するとたしかに動作が不安定なようですね
あまり頭がいい方法ではないかもしれませんが、バックグラウンドで
ajaxで読み込んでerror時に処理してみてはどうでしょう？

HTML
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('img').each(function(){
5    var obj=$(this);
6    var src=$(this).prop('src');
7    $.ajax({
8    url:src,
9    error:function(x,t,e){
10      if(e=="Not Found"){
11        obj.attr('alt','error');
12      }
13    },
14    });
15  });
16});
17</script>
18<img src="not_exist.jpg" alt="test">
19<img src="exist.jpg" alt="test">

投稿2016/12/22 08:30

編集2016/12/22 10:05

yambejp

総合スコア114839

tkturbo

2016/12/22 08:34

https://api.jquery.com/error/ によるとjQuery1.8でdeprecatedとなったようですね。

yukabyo

2016/12/22 08:37

そうなのですね、わざわざどうもありがとうございます！ですが、IEではやっぱりできなかったですm(__)m 「IEの場合、リンク切れを起こしていてもエラーを出さなかったりすることもあるらしい」というのを見たのですが、関係しているのでしょうか。。？

yukabyo

2016/12/22 09:53

追記ありがとうございます。月曜日まで試せないので、月曜日にまたその方法で試してみますね(*･ω･)*_ _)いろいろと考えていただきありがとうございます！

yambejp

2016/12/22 10:06

スミマセン、エラー状況だけチェックするようにしましたあとはうまくいかない場合にエラーメッセージみながら調整ですかね・・・

yukabyo

2016/12/26 02:36

追記のご回答ありがとうございます。追記で記載していただいたコードで、IEでも上手く動いているようです。大変助かりました、ありがとうございます！

guest1213

2016/12/26 03:21

こちらの回答にて不安定なのは $(function(){ ... }); で実行しているからではないでしょうか？ DOM読み込み完了してerrorハンドラを登録するより前にsrcの読み込みに失敗してerrorイベントが発生すると、その後登録されたハンドラが実行されないようです。 IE固有の問題か、ブラウザの処理性能によるタイミングの問題かまではちょっとわかりませんが、IE11で試したところ再現しました。Chromeでは再現しませんでした。 $(function() { ... }); を削除し、bodyの閉じタグの直前にscriptを記述したところIE11でも再現しませんでした。つまり、質問者様の「該当のソースコード」をこちらの回答にあるようなon形式に変えたものではこちらでは再現しませんでした。少なくともIE11においてはタイミングの問題だと思われるのでこちらの回答のようにajaxでも動くとは思いますが、単純にイベントハンドラを登録してからsrcの値を設定するというだけでもいいかも。

yukabyo

2016/12/26 04:25

guest1213様ご回答ありがとうございます。タイミングの問題で「イベントハンドラを登録してからsrcの値を設定する」というのを記述すればいいとのことですが、どの部分をどのように記述すれば良いのかがわかりません。以下のように$(window).load(function() {で囲んでみたのですがこれではいかないようです。申し訳ありませんが具体的なコードを教えていただけると大変有り難いです。m(__)m $(window).load(function() { $('img').on('error',function(e){ $(this).attr({ "src":"http://milky-wayhouse.com/img/information_noimg.jpg" }); }); });

guest1213

2016/12/26 04:48

こちらの回答のコメントに書くのもはばかられますが、あまり大したことじゃないので…。 $('img').on('error', function() { // イメージなし画像を設定する処理 }); $('img').attr({ "src":"main.jpg" // 本来表示したい画像 }); 私なんかは「ハンドラを登録してからそのトリガーとなる処理を実行する」ということは結構意識して書いてます。

yukabyo

2016/12/26 05:09

エラーの設定をしてから本来表示したい画像を出すということ、理解できました。ご丁寧にありがとうございました！

行動規範の内容に同意します