jquery - 什么时候是绝对定位元素的合适时间？

Question

具体问题

背景

我的网页，稍微简化了一下，如下所示:

1. 职位
2. 大图
3. 文本框

我正在尝试使用 jquery 将 div 定位在文本框的正上方。我的代码看起来像这样(使用位置 API:http://docs.jquery.com/UI/Position):

div.position({
    my: "left bottom",
    at: "left top",
    of: textbox,
});

其中 div 有 position: absolute 以免干扰页面的流动。

问题

我的问题是，即使我在 document.ready 上执行此定位，div 也会出现在图像的中间，就好像它是在呈现图像之前相对于文本框定位的一样。

事实上，如果我在 document.ready() 函数中打印出 textbox.offset() 并再次输入 $('#textbox ').offset()，我得到两个不同的结果:第一个似乎是加载图像之前文本框的偏移量，而第二个是正确的偏移量。

一般问题

所以我的问题是，是否有一个事件我可以订阅以了解文本框(通常是页面上的所有元素)的偏移数据何时正确？或者我是否遗漏了什么真的很基本吗？我觉得我做错了什么，因为这是我第二次遇到图像问题。我更愿意远离“不干净”的解决方案，例如在 document.ready 之后等待一段固定的时间或与图像本身进行交互。

谢谢!

Answer 1

我相信 Jacob 的回答会让它奏效。但一些解释会有所帮助。

onready当可以操作 DOM 时触发。它在所有图像和 CSS 加载完成之前触发。在您的情况下，您需要加载图像，以便浏览器可以正确检测其宽度和高度。

onload在加载所有图像后触发。这就是为什么您的偏移量在该事件之后是正确的。如果您不想等待所有图片加载完毕，您可以在该图片的加载事件中调用定位代码。

我建议尝试将图像的宽度和高度设置为内联 <img src='' width='' height=''> ，因此浏览器不必等待下载图像。然后你可以调用它来响应 ready事件。