Question

我的脚本在里面动态创建<ul>宽度左浮动<li>：它是一个分页器。之后，脚本会测量所有<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>

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

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

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

Answer 1

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

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