如何知道css样式是否完全应用于动态添加的内容

时间:2013-02-07 12:06:12

标签: jquery html css

案例: 内容被动态添加到某个div(使用jquery)。内容包含相当多的元素(比如1000个div)。

然后我需要计算元素的正确尺寸(实际上我需要在px中的顶部位置,所以我使用jquery position()函数)。首先,我在添加内容后立即开始计算。

问题是SOMETIMES顶部位置计算不正确我相信(并且非常肯定)这是因为css样式尚未正确应用于该内容。

我尝试解决此问题,在添加内容后,在一些超时(使用setTimeout)后开始调用。我使用的超时越多(我测试的时间从20到500毫秒)浏览器应用样式的时间越多,计算错误的可能性就越小。

问题是这个超时解决方案不是100%可靠和安全的,我需要使用相当大的超时来确保流程的正确性,这可能会降低流程的整体性能。

所以我需要知道何时完全应用了样式以及何时可以开始位置计算。你有什么建议,有没有可靠的方法呢?

2 个答案:

答案 0 :(得分:0)

使用Firebug或Google Chrome Dev工具?右键单击问题区域并选择“Inspect Element”将显示jQuery或任何其他Javascript完成其后的代码。

为了查看多长时间(在您的CPU上),jQuery可以执行所需的操作,您可以打开Goog​​le Chrome开发工具代码检查器,刷新页面并希望如此看到代码更改或不更改。这就是我的方式。

答案 1 :(得分:0)

我找出问题所在,它是动态应用的页面样式(动态创建的样式标记),尽管在将此样式添加到页面后需要等待超时。有时,如果超时不足,位置计算仍可能失败。虽然不是最可靠的策略 - (