JavaScriptで1度目だけ画像サイズが取得出来ない

Question

下記のような記述でJavaScriptを実行すると、
1度目のみ、サイズがwidth, height共に0になります。
ページのリロードをせずにもう一度実行すると、正しいサイズが取得出来ます。

これは記述の仕方が誤っているのでしょうか？
またはブラウザのバグなのでしょうか？

ちなみにブラウザは
GoogleChrome Version 55.0.2883.87 m (64-bit)
です。

var photo = "https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
var img = new Image();
img.src = photo;

console.log(photo);
console.log(img.width);
console.log(img.height);

Answer 1

winodow.onload で画像ロード後に実行してますか？

Comments

[退会済みユーザー]

window.onloadの後ではありますが、
Imageオブジェクトは新しく作っているため、
この方法ですと、画像の読み込みが走る前にサイズを見てしまうようですね。。
で、2回目以降はキャッシュが効いているのかもしれません。
正しく画像読み込み後のタイミングでサイズを取るように、修正したいと思います。
ありがとうございます。

[退会済みユーザー]

var photo = "https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";

var img = new Image();
img.src = photo;
img.onload = function(){
console.log(photo);
console.log(img.width);
console.log(img.height);
}

[katsuya141]

img.onloadでオブジェクト作成後の動作を指定できるんですね。私も勉強になりました。