AJAX 経由で配信される HTML を挿入する Web ページがあります。アプリオリにコンテンツのサイズはわかりませんが、そのサイズに基づいてコンテンツをページに配置する必要があります。うまくいかない簡単なアプローチは次のとおりです。
- 親コンテナの不透明度を 0 に設定します。
- コンテンツを DOM に挿入します。
- サイズを測定し
$el.outerWidth(true)ます。 - これらのサイズに基づいてコンテンツを配置します。
- 親コンテナの不透明度 (背面) を 1.0 に設定します。
このアプローチの問題点は、コンテンツが非常に複雑で、画像が含まれていることです。が呼び出されたときouterWidth()、ブラウザーは画面の再描画をまだ完了していないため、返されるサイズは正確ではありません。(興味深いことに、私の場合、最初の次元は、予想どおり 0 ではなく、常に最終的な値よりも大幅に大きくなっています。)
ステップ 2 と 3 の間にタイマーを設定することで問題を軽減できますが、タイマーをどれだけ長くしても、それを超えるシステムのブラウザーが必ず存在します。また、ほとんどのケースをカバーできるようにタイマーを十分に長くすると、不要な遅延が発生して、より高速なシステムを使用しているユーザーに不利になります。以下で参照されている回答のいくつかは asetTimeout(fn, 0)で十分であることを示唆していますが、そうではないことがわかりました。2012 MacBook Air で 60 ミリ秒もの描画時間を測定したところ、以下の 1 つの回答は 500 ミリ秒を示唆しています。
かつて Mozilla には、私の問題を解決する可能性のあるonPaintイベントがあったようです... もしそれがまだ存在していて、他のブラウザがそれを採用していたなら. （どちらにも当てはまりません。）また、Mutation Observersは、要素の変更を報告する際に描画時間を考慮していないようです。
解決策またはコメントは非常に高く評価されています。以下に示すように、これは以前に尋ねられたことがありますが、ほとんどの質問は少なくとも 1 年以上前のものであり、もう一度やり直したいと思っています。
残念ながら、実行可能な回答を提供しない関連する質問
- ブラウザで画像のレンダリングが終了した (つまり、ペイントされた) ことを検出する方法は?
- jQuery - ajaxでロードされた要素の真の高さ(画像付き)がわかったらすぐにスクリプトを実行する方法は?
- アペンド直後のDIV幅の計算がおかしい？
- jQueryは、要素を追加した直後にdiv要素の高さ0を返します
- Javascript: 新しく作成された要素の高さを取得できません
- jQuery:.html()で要素を挿入した後、.width()が時々0を返すのはなぜですか?
更新:まあ、この問題の一般的な解決策はないようです。私の特定のケースでは、コンテンツが読み込まれ、レイアウトが完了すると確実に変更されるプロパティを見つけました。JavaScript は、このプロパティの変更をポーリングします。まったくエレガントではありませんが、それは私が見つけることができる最良の選択肢でした.