Get height of image when refreshing

I'm trying to get the heig开发者_C百科ht of an image with jquery

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

Very basic. However I'm confused.

If I press F5 I get the following result:

Firefox: 383px

IE 8: 30px

Chrome: 0px

If I go to the page via a link:

Firefox: 383px

IE 8: 383px

Chrome: 383px

383 is obviously the correct value. But why do I get the wrong value upon refresh?

document.ready fires after the DOM has loaded, but not necessarily after the images and CSS have loaded. If you run that code on window.onload, you should get consistent results across the browsers.

Try using jQuery's load handler instead:

$(window).load(function() {
    alert($('#image').height());
})

Try waiting until the image is completely loaded

    var img = document.getElementById("image");
    img.onload = function () {
    alert($('#image').height());
    };

$(document).ready(function() {

    $('#image').bind("load", function() {
       alert($('#image').height());
    });

})