やったこと

webサービスを作るときに考えたことを垂れ流します

javascriptで画像読み込みエラーを検知する

javascriptで画像(img)の読み込みエラーを検出しようと思ったけどうまくいかなかった。

下記のようなコードを書いたけど、errorのイベントが発生しなかった。

function set_image_err(){
  $("#img_hoge").error(function(){
    //ここにエラー時の処理を書く
  });
}

$(window).load(function() {
  set_image_err();
});


どうも「$(window).load」を使うと、imgのロードが終了したあとにerrorイベントをセットする動作になってしまうようだ。これじゃ画像読み込みがエラーになってもerrorイベントとして検出できない。

imgのロードが始まる前にerrorイベントをセットしたい場合は「$('body').ready」を使うのが正解。

下記のようなコードにするとちゃんとerrorイベントが検出できた。

function set_image_err(){
  $("#img_hoge").error(function(){
    //ここにエラー時の処理を書く
  });
}

$('body').ready(function() {
  set_image_err();
});