Question

具体问题

背景

我的网页，简化了一点，看起来像这样：

我正在尝试使用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也会出现在图像的中间，就好像它是在渲染图像之前相对于文本框定位的。

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

一般问题

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

谢谢！

Answer 1

我相信雅各布的回答会让它发挥作用。但是一些解释会有所帮助。

当可以操纵DOM时，

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

所有图片加载后

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

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

Answer 2

$(document).ready()旨在成为使用window.onload的便捷替代方案，因为在大多数情况下，您需要的只是在函数触发之前设置DOM（因此无需等待像图像加载等的东西）。但是，有些情况，我认为你的是一个，其中window.onload实际上是你想要的。