IMG.complete属性で画像の読み込み状態を確認する [ javascript ]

画像が読み込めたか、読み込みに失敗したか。

これを知るのに、onloadとonerrorで察知する方向でスクリプト書いていたら、時々どちらにも引っかからないのに画像が表示されることがある。

何がしたかったかというと、テキトウに作ったページに埋め込んだ、まともに管理してないおかげで使ってるの忘れて消してしまったりしてちゃんとロードできなかったときに、ロードできなかった画像を非表示にしてなかったことにするスクリプトを書こうとした。

こんな感じでerrorが起きた画像をなかった事にしたり、成功した画像にデコレーションをつけようかと思ったのだけど、たまにデコレーションがかからない画像が表示される。

$(function(){
   $('img').each(function(){
      $(this).load(function(){
          $(this).css({ // OK! ついでにちょっとデコレーションしよう
              "border" : "2px solid #000",
              "box-shadow" : "5px 5px 5px #888888"
          });
      }).error(function(){
          $(this).hide(); // なかった事にOrz
      });
   });    
});

$＝jQuery.readyのタイミングで取っても既にロード終了していて、loadに引っかからないらしい。

どうせ手抜きスクリプトだからと放置気味だったこれをちょっと調べてみるかと行きあたった「[JavaScript][Image][uupaa.js] 完全に状況を掌握した画像の遅延読み」によると、IMG要素にはcompleteというプロパティがあるらしい。これで一工夫すれば改善されるような気がする。微妙に目的が違うのでコードをそのまま真似るわけにもいかないけど。

$(function(){
   function decorate(img) {//デコレート
      $(img).css({
          "border" : "2px solid #000",
          "box-shadow" : "5px 5px 5px #888888"
      });
   }

   $('img').each(function(){
      if (this.complete) {
          decorate(this);
          return;
      }
      $(this).load(function(){
          decorate(this); // OK! ついでにちょっとデコレーションしよう
      }).error(function(){
          $(this).hide(); // なかった事にOrz
      });
   });    
});

うん、今のところうまく言ってるような気がする。