bata's log

フロントエンド系のTipsとかメモ

JavaScript(jQuery)で画像のサイズを取得する際のエラー

ドはまりしたのでメモ。

.appendとかで生成した<img />の場合、widthやheightを指定していない事がありますが、これが画像の幅や高さを取得する際にハマる原因になったりします。

高さが取得できない!

<img src="sample.jpg />
var height = $('img').height();
consolo.log(height) // 0

画像にheightの指定がない場合、普通に取得しようとするとと画像の高さは0になってしまいます。

解決策

取得できない原因は、画像の読込が完了していないから

htmlで高さを指定している場合は(CSSでの指定も同様)、DOM構築が終わった段階でHTML上のheightが取得できますが、指定がない場合は、画像の読込完了後に取得することで、画像の高さを取得することが可能になります。

<img src="sample.jpg />
//該当の画像の読込が完了してから高さの取得を実行する。
$('img').on('load',function(){
    var height = $('img').height();
    consolo.log(height) // 200
})