Window.onload vs document.ready jQuery

У меня есть сайт с двумя столбцами. Я хочу иметь равную высоту при использовании jQuery.

Я пытаюсь получить высоту столбца логотипа. У меня было:

$(document).ready(function() {
    alert($('#logo').height());
});

и это не сработало. Поэтому я изменил его на:

window.onload = function(){
    alert($('#logo').height());
}

И это работает. Что здесь происходит?

Ответ 1

document ready запускается, когда DOM загружен, поэтому информация, подобная высоте, недоступна, если она явно не объявлена.

window onload ожидает, что активы на странице будут полностью загружены, поэтому теперь доступна информация, такая как высота.

Ответ 2

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

$(документ).ready()

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

Код:

$(document).ready(function() {
    // document is loaded and DOM is ready
    alert("document is ready");
});

$(window).load()

Событие загрузки окна запускалось несколько позже, когда полная страница полностью загружена, включая все кадры, объекты и изображения. Поэтому функции, относящиеся к изображениям или другому содержимому страницы, должны помещаться в событие загрузки для окна или самого тега содержимого.

Код:

$(window).load(function() {
    // page is fully loaded, including all frames, objects and images
    alert("window is loaded");
});