画像ロード完了を待つ

JavaScript jQuery

jQueryで<img>画像の幅と高さを取得して何か処理をする時、単純にこう書くと、

<img src="img.jpg" width=300 height=200>
<script>
var W = $('img').width();   // 幅
var H = $('img').height();  // 高さ

</script>

高さが０になってしまうことがある。

<img>に width と height 属性をセットしてあるのに・・・(´・ω・｀)
詳しくはわからないが、画像ロード完了前に実行されるとゼロになったりするのかな？

それなら、画像ロード完了を待って実行すればいんじゃね？と、このように書くと、

<img src="img.jpg" width=200 height=300>
<script>
$('img').on('load',function(){
    var W = $(this).width();   // 幅
    var H = $(this).height();  // 高さ
};

</script>

こんどは loadイベントが実行されない という罠にハマることになる。
画像がブラウザにキャッシュされていた場合に、loadイベントが実行されないらしい？

そして結局このようにしたら回避できた感じ。

<img src="img.jpg" width=200 height=300>
<script>
var onload = function(){
    var W = $('img').width();   // 幅
    var H = $('img').height();  // 高さ
};
if( $('img').height() >0 ) onload();
else $('img').on('load',onload);

</script>

これでいいんでしょうか・・。
う～んややこしい。