javascript - DOM リフレッシュ後に jQuery で width() を測定する

Question

私のスクリプトは、内部に<ul>width left-floating s を動的に作成します。これはページネーターです。<li>その後、スクリプトはすべて<li>のの幅を測定し、それらを合計します。

問題は、ノードがドキュメントに挿入された後、ブラウザーが DOM を更新し、CSS スタイルを適用するのに時間がかかることです。幅を測定する前にこれらの操作が完了していない場合、スクリプトは間違った値を取得します。測定を 1 秒で実行できれば、すべて問題ありません。

私が探しているのは、<ul>が完全に描画され、スタイルが適用され、幅が安定した瞬間を検出する方法です。または、少なくともすべての寸法の変化を検出する方法。もちろん、私は使用できますsetTimeout(..., 100)が、それは醜いと思います — 解決策ではありません。

幅の安定を検出する方法があれば、その直後に測定を行い、正しい値を取得します。

DOM によって生成された HTML コード

<div>
    <ul>
        <li><a href="...">1</a></li>
        <li><a href="...">2</a></li>
        ....
        </ul>
    </div>

PSなぜこれが必要なのですか。私のページネーターの左フローティングアイテムは、ページ自体よりも幅を広げようとすると<li>、次の行に移動する傾向があります。親の幅制限のため<ul>、ほとんど<li>のは見えませんが:<div>

div { width: 500px; overflow: hidden; }
div ul { width: 100%; white-space: nowrap; }
div ul li { display: block; float: left; }

<ul>スクリプトでの実際の合計幅を指定しない限り、それらはまだ下がります。

score 0 · Accepted Answer

CSS をドキュメントに埋め込むと、すべて問題ないことがわかりました。これは、初期化に使用したにもかかわらず、CSS ファイルが読み込まれていないことが問題であったことを証明してい$(document).ready()ます。

$(window).load()外部リソースに依存し、幅を正しく測定したい場合に使用する必要があります。

1 に答える 1