jQuery doesn't return proper body height on document load - Their bug or mine?

Question

When I use

$(document).ready(function() {
 var bodyHeight = $(\"body\").height();
 console.log(bodyHeight);
});

I get a really wack number

Answer 1

You want to look at the $(window).load() function rather than $(document).ready().

The $(document).ready() event executes when the HTML DOM is loaded and ready, even if all the graphics haven't loaded yet. The $(window).load() event executes later when the complete page is fully loaded, including all frames, objects and images.

Here is a great link describing the difference. http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Answer 2

The document.ready event fires after the DOM has loaded but before the page has fully rendered. If you want to get the correct height, you should try the window.load event which fires after all images and objects have been loaded and the page has been rendered:

$(window).load(function() {
    var bodyHeight = $("body").height();
});