ハマってしまった・・・

jqueryで画像の幅を取得しようとしたら、幅が0になりました。

前もこれで躓いたことあるなぁ～と思ってググってみると、真っ先に出てくる対処法は、loadを使う方法。

【jQuery】

$(function(){
	$('img').bind('load',function(){
		var $W = $(this).width();
		$(this).parents('.wrap').find('p').append($W);
	});
});

・・・・が、これでも0に。

bindじゃなくてonか？と思ってやってみてもやっぱりゼロ。

いろいろいろいろ考えた結果、
単純にその部分に、cssでdisplay:none;を設定していたからでした。

ボタン切り替えで表示非表示をしているところで、読み込み時点ではその画像は非表示だったので、0になってた(￣Д￣;)
よく考えれば当たり前のことなんですけどね・・・。

そして、表示のままやってみると、loadやonを使わなくても幅をゲットできました。(￣ー￣?)…..??アレ??

【HTML】

<div class="wrap">
    <h1>display設定なし</h1>
        <div>
            <img src="img/rose.jpg" alt="" />
        </div>
    <p>幅：</p>
</div>
<div class="wrap">
    <h1>縮小</h1>
        <div>
            <img width="300" src="img/rose.jpg" alt="" />
        </div>
    <p>幅：</p>
</div>
<div class="wrap hide">
    <h1>display:none</h1>
    <div>
        <img src="img/rose.jpg" alt="" />
    </div>
    <p>幅：</p>
</div>

【jQuery】

$(function(){
	$('img').each(function(){
		var $W = $(this).width();
		$(this).parents('.wrap').find('p').append($W);
	});
});

上記テストページはこちら