jQuery .ready 和元素高度

Question

这可能看起来是一个琐碎的问题，但在使用jQuery时我遇到了一个问题。当我尝试在.ready中获取一个元素的高度时，我总是得到零。

$(function() {
  $('#my-elem').height() // Always gives me zero.
});

如果我在 setTimeout() 中设定一个延迟时间（比如 0.5 秒）来进行高度检查，那么高度就会被正确地返回给我。我猜这是因为样式还没有得到应用的缘故？

目前我找到的唯一解决方案是使用定时器来轮询元素的高度，直到它变成非零值，但这似乎有点过于复杂了。有更好的方法吗？

- backdesk

---

#my-elem 是 div、span、img 或其他什么。 - user1432124

元素是否被隐藏然后显示？尝试使用$(window).load()事件，该事件比docready稍晚触发。 - elclanrs

尝试将脚本放在页面底部。 - Ajay Beniwal

不，这样做没有帮助；事实上，这意味着脚本会在DOMReady（document.ready）事件之前触发。 - Salman A

请展示HTML代码，如果可能的话，请提供一个fiddle。 - Starx

Answer 1

document.ready事件表示HTML DOM已准备好通过Javascript访问，但这并不意味着元素已经渲染完成。

事实上，这就是ready的全部：它是一种让您开始操作文档HTML DOM的方式，而无需等待页面加载完成。可以安全地假设在document.ready时，您的元素尚未显示在页面上。

现在，这带来了一个警告：如果元素尚未呈现，浏览器/ Javascript如何知道其解析高度？由于这个原因，.height()在document.ready可能会返回零。当需要从布局中拉取框维度时，最好等到load而不是ready。

- Richard Neil Ilagan

---

我认为“大多数时候（如果不是每次）”应该被理解为“很少发生”。 - Salman A

我是从经验中说出来的，但让我重新措辞一下，使其更加通用。 - Richard Neil Ilagan