window.onload vs document.ready jQuery

Question

I have a site with two columns. I want to have equal height on both using jQuery.

I'm trying to get the logo column height. I had:

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

and it didn't work. So I changed it to:

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

And it's working. What is going on in here?

Answer 1

document ready is fired when the DOM has loaded, so information like height isn't available, unless it's explicitly declared.

window onload waits for the assets in the page to be completely loaded - so information such as height is now available.