javascriptのimageオブジェクトの読み込み確認

javascript

javascriptのimageオブジェクトの読み込み確認でハマりましたのでメモ

imageオブジェクトはsrcにパスを入力すると読み込みを開始します。 image.completeはsrcにパスを入力する前もtrueなので、単純にimage.completeだけで確認しようとすると、そもそもsrcに値が未設定の読み込み開始前のimageについてもcompleteになるんですね。

var img = new Image();
(function(){
  console.log(img.complete); // true
  img.src = '[画像パス]';
  console.log(img.complete); // 読み込み中はfalse
  setTimeout(after, 1000);
}());
function after(){
  console.log(img.complete); // 読み込み後はもちろんtrue
}

なので、現在は
img.complete
だけの判断ではなく、
img.src && img.complete
で判断することで回避しています。
いけてるのかといわれると、どうなのだろう。
今回複数の画像の読み込み完了を確認したかったので、onloadだけだとうまくいかなかったためこのような方法で実装を行おうと思います。

確認した環境はchrome56です。