Получить высоту изображения при обновлении

Question

Я пытаюсь получить высоту изображения с JQuery

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

Очень простой. Однако я смущен.
Если я нажимаю F5 я получаю следующий результат:
Firefox: 383px
IE 8: 30px
Chrome: 0px

Если я иду на эту страницу по ссылке:
Firefox: 383px
IE 8: 383px
Хром: 383px

383, очевидно, правильное значение. Но почему я получаю неправильное значение при обновлении?

Answer 1

document.ready пожары после загрузки DOM, но не обязательно после загрузки изображений и CSS. Если вы запустите этот код на window.onload, вы должны получить согласованные результаты в браузерах.

Попробуйте использовать load обработчик JQuery вместо:

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

Answer 2

Попробуйте подождать, пока изображение не будет полностью загружен

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

Answer 3

$(document).ready(function() { 

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

})