描画完了のタイミング

質問

jQuery使用しています。

var tag = '<div id="aaaa">～～～～～</div>';
$("body").prepend(tag);

alert($("#aaaa").height());

でブラウザ上には表示出るのですが、直後に表示したボックスの高さを取得しようとすると、1回めのキャッシュがない状態ではおかしなことになります。キャッシュがある状態では正しく出ます。

tagの中には画像とかを高さ指定せずに入れてるから、描画前には取得できないからだと思いますが、描画が完了した段階で高さを取得するにはどうしたらよいでしょうか？

回答No.2

fujillin · ベストアンサー

通常のテキストなどだけから構成されているHTML要素なら、ご提示の方法で取得できると思いますが…？

もしかして、div要素の中にブラウザが取得するのに時間がかかる要素（ 例えば<img>など ）が包含されていませんか？
そのような場合は、DOM要素自体は追加されていても、要素の実際のサイズが不明な状態（ブラウザが画像データ等を取得するまで）の間は、当然ながら最終表示形での値は返ってこないと考えられます。

画像などのonloadを待って値を取得するか、プレロードするようにしておくかなどで対処可能と思いますが、事前に追加するHTMLの内容がわかっている必要がありますね。
かなりアバウトでもよいのなら、setTimeoutで適当な時間経過後に処理をするとかでもいけるかも知れませんが、これはほとんど根拠のない方法とも言えるかも。

プレロードしておく場合でも、ご提示の処理までに充分な時間がとれない可能性（ロード完了前に処理が発生してしまう）があるなら、結局のところ、画像のonloadを確認するという処理が必要になるでしょう。

お礼

ありがとうございます。

質問時、頭が混乱していましたが、要約すると
画像のプレロード開始のタイミングを知りたかったのでした。

今は以下のように理解しています。

var imgObj = $("<img />");
imgObj.attr({ "src":"./1.bmp"});　//この時点でhttpdリクエスト開始されている。

var imgObj2 = $("<img />");
imgObj2.attr({ "src":"./2.bmp"}); //1.bmpが読み込み完了してなくとも並行して2.bmpに対してのhttpdリクエスト開始

imgObj.load(function(){
imgObj2.load(function(){
//1.bmp 2.bmpとも読み込み完了した状態

});
});

並行して同時読み込みされるのかが心配でしたが、されるようでしたので安心しました。

回答No.1

play_with_you

$(document).ready()の中に入れればいいのでは？
「window.onload=」見たいなものです。

ちなみに、jQueryを使うなら
＞var tag = '<div id="aaaa">～～～～～</div>';
なんてのはやめましょう。
「jQuery DOM要素 生成」で検索。

お礼

jQuery DOM要素 で　状況が見えてきたので、やりたいことと鑑み別の質問を立てさせて頂きます。ありがとうございます。

補足

$(document).ready　と　window.onloadは別物ですね。