Quelle est la différence entre $(window).charge et $(document).est-il prêt?

Question

J'ai eu un problème dernièrement avec mon CODE JavaScript et de prendre une partie de mon code de ma $(document).ready() et de la mettre à la $(window).load() a résolu le problème.

Maintenant, je comprends que window.load est déclenché juste après l' document.ready, mais pourquoi n'est-il pas prêt après l' document.ready, c'est après l' window.load()?

Answer 1

load est appelé lorsque tous les actifs sont fait de chargement, y compris les images. ready est déclenché lorsque le DOM est prêt pour l'interaction.

À partir de la MDC, fenêtre.onload:

La charge événement se déclenche à la fin de la document de processus de chargement. À ce point, tous les objets de la document sont, dans les DOM, et tous les des images et des sous-cadres ont fini le chargement.

À partir de la documentation de l'API de jQuery, .prêt( handler ):

Tout en JavaScript fournit la charge manifestation pour l'exécution de code lorsqu'une page est rendu, cet événement n'a pas obtenir de l' déclenchée jusqu'à ce que tous les actifs tels que les images ont été entièrement reçu. Dans la plupart des cas, le script peut être exécuté dès que le DOM de la hiérarchie a été entièrement construite. Le gestionnaire passé d' .prêt() est garantie exécuté après le DOM est prêt, donc c'est généralement le meilleur endroit pour joindre tous les autres gestionnaires d'événements et les exécuter d'autres jQuery. Lors de l'utilisation de les scripts qui reposent sur la valeur de CSS les propriétés de style, il est important de référence des feuilles de style externes ou intégrer des éléments de style avant référencement sur les scripts.

Answer 2

$(document).ready() signifie que le DOM de votre page est prête à être manipulés.

window.load() est déclenché lorsque l'ensemble de la page (incl. composants comme les CSS et les fichiers d'image) a été complètement chargé.

Qu'essayez-vous de réaliser?

Answer 3

$(document).ready(function(){
//code here
});

Le code ci-dessus est utilisé presque à chaque fois, lorsque nous travaillons avec des jQuery.

Ce code est utilisé lorsque l'on veut initialiser notre jQuery codes après le DOM est prêt.

$(window).load()

Parfois, vous voulez manipuler les images. Par exemple, vous souhaitez aligner verticalement ou horizontalement une image et que vous avez besoin pour obtenir la largeur et la hauteur de l'image pour le faire. Avec $(document).ready() , vous ne serez pas en mesure de le faire que si le visiteur n'a pas l'image déjà chargée, dans ce cas, vous devez initialiser la jquery de l'alignement de la fonction lorsque l'image finit de se charger. C'est là que nous utilisons $(window).load()

Answer 4

$(document).ready est jQuery événement est déclenché lorsque le DOM est chargé, de sorte qu'il est déclenché quand la structure du document est prêt.

$(window).load événement est déclenché une fois que tout le contenu (y compris css, images, etc..) est chargé.

C'est la différence majeure.