Когда подходящее время для абсолютного позиционирования элемента?

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 появляется в середине изображения, как если бы он располагался относительно текстового поля до его визуализации.

На самом деле, если я распечатываю textbox.offset() во время функции document.ready() и снова набираю $('#textbox').offset(), я получаю два разных результата: первым кажется смещение текстового поля передизображение загружается, в то время как второе является правильным смещением.

Общий вопрос

Поэтому мой вопрос: есть событие, на которое я могу подписаться, чтобы узнать, когда данные смещения для текстового поля(как правило, все элементы на странице) будут правильными? Или я упускаю что-то действительно простое? Я чувствую, что делаю что-то не так, так как я уже второй раз сталкиваюсь с этой проблемой с изображениями.dпредпочитайте держаться подальше от "нечистых" решений, таких как ожидание после document.ready определенного фиксированного промежутка времени или взаимодействие с самим изображением.

Спасибо!

Answer 1

Я верю, что ответ Джейкоба заставит его работать. Но некоторые объяснения помогут.

onready срабатывает, когда DOM можно манипулировать. Он срабатывает до того, как все изображения и CSS были загружены. В вашем случае вам нужно загрузить изображение, чтобы браузер мог правильно определить его ширину и высоту.

onload срабатывает после загрузки всех изображений. Вот почему ваше смещение будет правильным после этого события. Если вы не хотите ждать загрузки всех изображений, вы можете вызвать код позиционирования в событии загрузки этого изображения.

Я бы предложил установить встроенную ширину и высоту изображения <img src='' width='' height=''>, чтобы браузеру не пришлось ждать загрузки изображения. Тогда вы можете просто вызвать его в ответ на событие ready.

Answer 2

$(document).ready() разработан, чтобы стать удобной альтернативой использованию window.onload, поскольку в большинстве случаев все, что вам нужно, это настроить DOM до того, как ваши функции сработают (поэтому не нужно ждать таких вещей, как загрузка изображений , так далее). Тем не менее, есть случаи, и я думаю, что у вас есть один, где window.onload на самом деле то, что вы хотите.