web-dev-qa-db-fra.com

window.onload vs document.ready jQuery

J'ai un site avec deux colonnes. Je veux avoir une hauteur égale sur les deux en utilisant jQuery.

J'essaie d'obtenir la hauteur de la colonne de logo. J'ai eu:

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

et ça n'a pas fonctionné. Alors je l'ai changé pour:

window.onload = function(){
    alert($('#logo').height());
}

Et ça marche. Qu'est-ce qui se passe ici?

jquerywindowdocumentonloadready
25
KryQ

J'ai eu un même problème dans la manipulation de la hauteur et de la largeur de l'image à l'intérieur de $ (document) Prêt et j'ai trouvé de meilleures références pour le résoudre ... J'espère que cela pourrait aider quelqu'un

$ (document) .Ready ()

L'événement prêt au document est tiré lorsque le document HTML est chargé et que le DOM est prêt, même si tous les graphiques n'ont pas encore été chargés. Si vous souhaitez connecter vos événements pour certains éléments avant la charge de la fenêtre, alors $ (document) .Ready est le bon endroit.

Code :

$(document).ready(function() {
    // document is loaded and DOM is ready
    alert("document is ready");
});

$ (fenêtre) .charger ()

L'événement de charge de la fenêtre a déclenché un peu plus tard, lorsque la page complète est entièrement chargée, y compris toutes les cadres, objets et images. Par conséquent, les fonctions qui concernent des images ou d'autres contenus de page doivent être placées dans l'événement de charge pour la fenêtre ou la balise de contenu lui-même.

Code :

$(window).load(function() {
    // page is fully loaded, including all frames, objects and images
    alert("window is loaded");
});
3
kamesh

document ready est tiré lorsque le DOM est chargé, des informations telles que la hauteur ne sont pas disponibles, à moins que cela ne soit explicitement déclaré.

window onload attend que les actifs de la page soient complètement chargés - des informations telles que la hauteur sont maintenant disponibles.

34
ahren