Obtenez hauteur de l'image lors de l'actualisation

Question

J'essaie d'obtenir la hauteur d'une image avec jquery

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

Très basique. Cependant, je suis confus.
Si j'appuie sur F5 j'obtenir le résultat suivant:
Firefox: 383px
IE 8: 30px
Chrome: 0px

Si je vais à la page via un lien:
Firefox: 383px
IE 8: 383px
Chrome: 383px

383 est évidemment la valeur correcte. Mais pourquoi ai-je la mauvaise valeur lors de l'actualisation?

Answer 1

document.ready après le chargement du DOM, mais pas nécessairement après le chargement des images et du CSS. Si vous exécutez ce code sur window.onload, vous devriez obtenir des résultats cohérents à travers les navigateurs.

Essayez d'utiliser gestionnaire load jQuery à la place:

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

Answer 2

Attendez la fin de l'image est complètement chargée

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

Answer 3

$(document).ready(function() { 

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

})