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

I had a same problem in handling Image height and width inside $(document)ready and I found some better referenses to solve it... I hope this may help some one

$(document).ready()

The document ready event fired when the HTML document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet. If you want to hook up your events for certain elements before the window loads, then $(document).ready is the right place.

Code:

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

$(window).load()

The window load event fired a bit later, when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.

Code:

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

Answer 2

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.