【JS】画像の高さを取得したいです。

Question

度重なる質問で申し訳ございません。

var bird = new Image();
bird.src = "images/bird.png";
console.log(bird.height);

このように指定した画像の高さを取得したかったのですが、何回やっても0になってしまいます。念のためファイルの場所や名前も確認しましたが、問題はなかったです。

サイトにまだ表示されていない画像の高さは０になるというルールがあるのでしょうか？

もしくはただ単に自分のブラウザのバージョンが低いだけでしょうか？
よろしくお願いいたします。

Answer 1

画像が読み込まれきる前に取得しようとしているからです。
よって下記のような構文にする必要があります。

var bird = new Image();
bird.src = "images/bird.png";
bird.onload = function(){
  console.log(this.height);  
};

サイトにまだ表示されていない画像の高さは０になるというルールがあるのでしょうか？

上記の通りなので、そんなルールはございません。
ただ単純に、画像の読み込みより先に高さ取得のJavaScriptが実行されてしまっているため、高さが取得できていないだけです。
こういった、画像などの読み込みの多くは、非同期で行われているため、
読み込まれないうちに、次の処理が実行される、といったことはよく起きます。
なので、読み込み系の処理は、読み込まれきったら次の処理といった工夫をする必要があります。

Comments

[miyabi_pudding]

ちなみに、heightプロパティだと、dom上で、height属性が入っていた場合、
その値が入ってしまいますので、画像本来の高さの取得になりませんので、
注意が必要です。
（<img src="hoge.png" height="25">とかだった場合、画像本来の大きさ関係なく、25の取得になってしまうってこと）
画像本来の高さの取得の場合は、
naturalHeightを使います。

[prog.henry]

なるほど！読み込まれていなかったから、正常な値にならなかったのですね！解決しました！ありがとうございました！！

[miyabi_pudding]

私も久々に調べてみたら、
onload挟んで無い内容の記事がちょいちょい散見されました 汗
回答にも記載しましたが、画像に限らず、読み込み物の情報取得は、読み込まれ切ってからでないとできない、と覚えとくといいかと。

[prog.henry]

ありがとうございました！