「エレメントレンダリング」はありますか？イベント？

Question

Web アプリケーション内のテキストのサイズを正確に測定する必要があります。これを行うには、(関連する CSS クラスを使用して) 要素を作成し、その innerHTML を設定してから、appendChild を使用して追加します。 コンテナに実装されます。

これを実行した後、要素がレンダリングされるまでしばらく待つ必要があります。要素の offsetWidth を読み取ってテキストの幅を知ることができます。

現在、setTimeout(processText, 100) を使用してレンダリングが完了するまで待機しています。

リッスンできるコールバック、または作成した要素がいつレンダリングされたかを知るためのより信頼性の高い方法はありますか?

Answer 1

受け入れられた回答は 2014 年のもので、現在は古くなっています。 setTimeout は機能する可能性がありますが、最もクリーンな方法ではなく、要素が DOM に追加されたことを必ずしも保証しません。

2018 年現在、要素が DOM に追加されたことを検出するには MutationObserver を使用する必要があります。 MutationObservers は、すべての最新ブラウザー (Chrome 26、Firefox 14、IE11、Edge、Opera 15 など) で広くサポートされるようになりました。

DOM に要素を追加すると、その実際の寸法を取得できるようになります。

これは、要素が DOM に追加されたときに MutationObserver を使用してリッスンする方法の簡単な例です。

簡潔にするために、jQuery 構文を使用してノードを構築し、DOM に挿入します。

var myElement = $("
hello world
")[0];

varobserver = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.log("DOM 内にあります!");
        オブザーバー.切断();
    }
});

observer.observe(document, {属性: false, childList: true,characterData: false, subtree: true});

$("body").append(myElement); // console.log: DOM 内にあります!

observer イベント ハンドラーは、document にノードが追加または削除されるたびに起動します。次に、ハンドラー内で contains チェックを実行して、myElement が document 内にあるかどうかを確認します。

myElement で document.contains チェックを直接実行できるため、mutations に格納されている各 MutationRecord を反復処理する必要はありません。

パフォーマンスを向上させるには、

document を、myElement を含む DOM 内の特定の要素に置き換えます。

Answer 2

現時点では、要素が完全にレンダリングされたことを示す DOM イベントはありません (追加の CSS が適用されて描画されるなど)。これにより、一部の DOM 操作コードがエラーやランダムな結果 (要素の高さの取得など) を返す可能性があります。

setTimeout を使用してブラウザにレンダリングのオーバーヘッドを与えるのが最も簡単な方法です。使用＃＃＃

setTimeout(function(){}, 0)

はおそらく最も実用的に正確です。コードを遅延なくアクティブなブラウザーのイベント キューの最後に配置します。つまり、コードはレンダリング操作 (およびその時点で行われる他のすべて) キューの後に配置されます。すぐに）。