DOM 刷新后用 jQuery 测量 width()答案

【问题标题】：Measure width() with jQuery after DOM refreshDOM 刷新后用 jQuery 测量 width()
【发布时间】：2010-06-11 22:42:48
【问题描述】：

我的脚本在内部动态创建了一个<ul> 宽度左浮动<li>s：它是一个分页器。之后，脚本会测量所有<li>s 的宽度并将它们相加。

问题在于，在将节点注入文档后——浏览器会刷新 DOM 并应用 CSS 样式，这需要一段时间。它对我的脚本有负面影响：当这些操作在我测量宽度之前没有完成时——我的脚本得到了错误的值。如果我在一秒钟内执行测量 - 一切都很好。

我正在寻找一种方法来检测<ul> 完全绘制、应用样式和宽度稳定的时刻。或者至少是一种检测每个维度变化的方法。当然我可以使用setTimeout(..., 100)，但它很丑，我猜——根本不是解决方案。

如果有办法检测宽度稳定性——我会在它之后立即进行测量以获得正确的值。

DOM 生成的 HTML 代码

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

附注为什么我需要这个。当<ul> 试图变得比页面本身更宽时，我的分页器的左浮动<li> 项目倾向于移动到下一行。尽管由于父 <div> 的宽度限制，大多数 <li>s 是不可见的：

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

除非我用脚本指定 <ul> 的实际总宽度，否则它们仍然会下降。

【问题讨论】：

【解决方案1】：

我发现当我将 CSS 嵌入到文档中时——一切都很好。这证明问题是我的 CSS 文件没有被加载，尽管我使用了$(document).ready() 进行初始化。

当依赖外部资源并愿意正确测量宽度时，应该使用$(window).load()。

【讨论】：