window.onload vs document.ready jQuery

jquery window document onload ready
KryQ picture KryQ · May 28, 2012 · Viewed 25.2k times · Source

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

ahren picture ahren · May 28, 2012

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.

Related questions

$(window).scrollTop() vs. $(document).scrollTop()

What's the difference between: $(window).scrollTop() and $(document).scrollTop() Thanks.

Read More
Difference between screen.availHeight and window.height()

I am executing the following Javascript on my browser (Firefox). console.debug("Screen height = "+ screen.availHeight); //outputs 770 console.debug("Window Height ="+ $(window).height()); //outputs 210 (I am using jQuery as well) What is the difference between the two? Is 770 in pixels …

Read More
What is the difference between the document selector and window selector?

I have the following JQuery function that takes user input and displays it on screen. When I select for both $(document) and $(window) the function works. What is the disadvantage to using either selector? Where can I read more on …

Read More