jquery - ネストされた画像が読み込まれた後に要素の高さを見つける一貫した方法

Question

私はいくつかの要素div.bodyの中に含まれているを持っています。img

div.bodyロード後の高さを取得する必要がありimgます。

私は現在、以下を測定に使用しています。

var $body = $("div.body");
$body.find("img").ready(function(){
   var bodyHeight = $body.outerHeight();
});

これにより、90％の確率で正しい高さが返されますが、画像の高さを含まない高さが返される場合があります。

たとえば、他の要素のdiv.body合計が50px、で、画像の高さが、の150px場合、を取得する必要がありますが200px、これがちょうどを返す場合があり50pxます。

どうしてこれなの？.ready()画像が読み込まれた後にのみ関数を呼び出すべきではありませんか？

別の方法を使用する必要がありますか？

イメージが利用可能になった後、このコードを実行する100％一貫した方法は何ですか？

score 3 · Accepted Answer

.ready()ページ全体のDOMがロードされたときに実行されます。あなたが欲しい.load()。

動的に追加されたコンテンツに対して機能する実装については、こちらのディスカッションセクションを参照してください。

score 0 · Accepted Answer

jQueryのドキュメントによると、画像でloadイベントを使用する際の注意点がいくつかあります。

ここを見てください：

そしてここ：

2 に答える 2