Element.height() 不正确，因为浏览器尚未完成渲染？答案

【问题标题】：Element.height() incorrect because browser hasn't finished rendering it?Element.height() 不正确，因为浏览器尚未完成渲染？
【发布时间】：2014-02-12 21:01:34
【问题描述】：

我将 div1 附加到 div2 中，然后获取 div2 的 height()。如果我在调用 height() 之前等待 50 毫秒，我会得到不同的高度。看起来我在浏览器完成渲染 div1 之前就得到了高度。任何人都知道我该如何解决这个问题。我正在添加很多元素，并且需要在每个元素之后检查高度，因此每个元素之间的延迟似乎可能会增加相当长的延迟。

$(div2).append(div1);
console.log(div2.height()) // 295

where as...

$(div2).append(div1);
window.setTimeout(function(){
    console.log(div2.height()) // 245
},50)

【问题讨论】：

stackoverflow.com/questions/19737762/…的可能重复
我的游戏也有同样的问题，你需要延迟加载/准备文件。
你需要等待元素加载完成，或者你需要找到他们的高度没有事先确定的原因。在字体渲染（如 Typekit 或 Google Fonts）的情况下，只能等待。对于您的内容，您可以将高度值设置为和其他元素，以便浏览器在绘制 dom 之前知道它们的尺寸。
这些元素是在document.ready之后添加的
延迟有效，但它似乎是一个“神奇”的数字。任何低于 50 毫秒的东西都不起作用。恐怕在其他机器上这个数字可能更大。

标签： javascript jquery

【解决方案1】：

您可以请求某些属性来强制布局。例如，如果您请求以下任何属性：

偏移顶部
左偏移
偏移宽度
偏移高度
scrollTop/Left/Width/Height
clientTop/Left/Width/Height

浏览器会在返回值之前布局该元素。如果您有一个复杂的布局，您可能需要请求多个对象的属性才能获得多个项目的正确布局。

有关此概念的更多详细信息和工作演示，请参阅 this answer 和 this article。

【讨论】：

【解决方案2】：

把你的代码放进去

$( document ).ready(function() {
 // your code
});

会有用的

【讨论】：