2013年8月10日土曜日

jQuery で特定の DOM の表示が完了したタイミングを取る

特定の DOM の表示が完了したかどうかは ready() で取得することができます。
var target = $('<div id="target"></div>');
$('body').append(target);
target.ready(function() {
    console.log('target の準備が完了');
});

一般的に、ドキュメントがロードされた時には以下のように書いていると思います。
$(function() {
    // ドキュメントロード後の処理
});

これと同じで、スクリプトの実行中に新しく作られた DOM についても、
表示が完了してから操作すべき場合があります。
例えば、DOM の高さを測ったりする場合です。
var target = $('<div id="target"></div>');
$('body').append(target);
console.log(target.height());  // まだ表示されてない場合は 0 になる
target.ready(function() {
    console.log(target.height());  // 表示後の実際の高さ
});

0 件のコメント:

コメントを投稿