jQuery $.position() 在 $(document).ready 期间在 chrome (webkit?) 中表现不同

Question

当我尝试获取 $(document).ready(function() { }); 中元素的位置时它在chrome中为position.top提供了不同的(不正确的)值，但在firefox中是正确的。它会偏离 15-45px，具体取决于它获取位置的元素。

我的视口(viewport)中有一个具有溢出:隐藏的项目列表，我想获取每个项目的位置。

<div class='viewport'>
  <div class='item'>Item Info</div>
  <div class='item'>Item Info</div>
  <div class='item'>Item Info</div>
  <div class='item'>Item Info</div>
</div>

.viewport { position:relative; overflow: hidden; }
.item { margin-left: 10px; }

当我执行 $(".viewport .item").each(function() { var pos = this.position(); }); 时，它会给出值，但它们是错了。

更奇怪的是，如果我从控制台执行此操作(页面加载完成后)，它将返回正确的值。似乎错误的值只出现在 $(document).ready 期间。

有没有办法解决这个问题，以便我仍然可以在 doc.ready 期间进行定位？

Answer 1

position() ( docs )，与 offset 模块中的其他函数(更一般地说，在 css 模块中)一样，取决于实际位置渲染后 DOM 中的元素。

另一方面，

$(document).ready() 在构造 DOM 后立即触发。
在现代浏览器上，它对应于 DOMContentLoaded :

the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading

在ready中，您可以安全地操作DOM(附加事件等)，但如果您“测量”它，则可能会遇到问题。例如，它不会等待样式表下载，或图像下载和渲染。

您遇到了一个非常烦人的问题，因为它非常依赖于平台(浏览器 + jQuery 版本):在我们的例子中，它可以在三个浏览器中的两个上运行，甚至在第三个浏览器上它也可以运行 99% 的浏览器。时间，这表明它可能是一个竞争条件(JavaScript 是单线程的，但浏览器不是)。

如果您需要测量元素，最好使用 $(window).load()