jQuery – Quelles sont les différences entre $ (document) .ready et $ (window) .load?

Quelles sont les différences entre

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

et

 $(window).load(function(){ //my code here }); 

Et je veux m’assurer que:

 $(document).ready(function(){ }) 

et

 $(function(){ }); 

et

 jQuery(document).ready(function(){ }); 

sont identiques.

Pouvez-vous me dire quelles sont les différences et les similitudes entre eux?

 $(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready console.log("document is ready"); }); $(window).load(function() { // executes when complete page is fully loaded, including all frames, objects and images console.log("window is loaded"); }); 
  

document.ready est un événement jQuery, il s’exécute lorsque le DOM est prêt, par exemple tous les éléments sont là pour être trouvés / utilisés, mais pas nécessairement tout le contenu.
window.onload déclenche plus tard (ou en même temps dans les pires cas) lorsque des images et autres sont chargées. Donc, si vous utilisez des dimensions d’image par exemple, vous souhaitez souvent l’utiliser à la place.

Lisez aussi une question connexe:
Différence entre les fonctions $ (window) .load () et $ (document) .ready ()

A partir du document API jQuery

Alors que JavaScript fournit l’événement de load pour l’exécution du code lors du rendu d’une page, cet événement n’est déclenché que lorsque toutes les ressources, telles que les images, ont été complètement reçues. Dans la plupart des cas, le script peut être exécuté dès que la hiérarchie DOM a été entièrement construite. Le gestionnaire transmis à .ready() est garanti pour être exécuté une fois que le DOM est prêt, c’est donc généralement le meilleur endroit pour attacher tous les autres gestionnaires d’événements et exécuter un autre code jQuery. Lorsque vous utilisez des scripts qui reposent sur la valeur des propriétés de style CSS, il est important de faire référence aux feuilles de style externes ou aux éléments de style incorporés avant de référencer les scripts.

Dans les cas où le code repose sur des ressources chargées (par exemple, si les dimensions d’une image sont requirejses), le code doit plutôt être placé dans un gestionnaire pour l’événement load .


Réponse à la deuxième question –

Non, ils sont identiques tant que vous n’utilisez pas jQuery en mode sans conflit.

L’événement ready se produit après le chargement du document HTML, tandis que l’événement onload se produit plus tard, lorsque tout le contenu (par exemple, les images) a également été chargé.

L’événement onload est un événement standard dans le DOM, tandis que l’événement ready est spécifique à jQuery. L’événement ready a pour object de se produire le plus tôt possible après le chargement du document, de sorte que le code qui ajoute des fonctionnalités aux éléments de la page n’ait pas à attendre que tout le contenu soit chargé.

Ces trois fonctions sont les mêmes.

 $(document).ready(function(){ }) 

et

 $(function(){ }); 

et

 jQuery(document).ready(function(){ }); 

ici $ est utilisé pour définir jQuery comme $ = jQuery .

Maintenant, la différence est que

$(document).ready est un événement jQuery déclenché lorsque DOM est chargé, il est donc déclenché lorsque la structure du document est prête.

$(window).load événement $(window).load est déclenché après chargement complet du contenu, comme la page contient des images, css etc.

La différence entre les fonctions $(document).ready() et $(window).load() est que le code inclus dans $(window).load() sera exécuté une fois la page entière (images, iframes, feuilles de style, etc.) sont chargés alors que l’événement de document prêt se déclenche avant que toutes les images, les iframes, etc. soient chargés, mais que l’ensemble du DOM est prêt.


 $(document).ready(function(){ }) 

et

 $(function(){ }); 

et

 jQuery(document).ready(function(){ }); 

Il n’y a pas de différence entre les 3 codes ci-dessus.

Ils sont équivalents, mais vous pouvez rencontrer des conflits si d’autres Frameworks JavaScript utilisent le même symbole dollar $ comme nom de raccourci.

 jQuery.noConflict(); jQuery.ready(function($){ //Code using $ as alias to jQuery }); 

Je pense que vous devriez regarder cet article: 6 différents types de $ (document) .ready () exemples

L’événement ready est toujours exécuté à la seule page html chargée dans le navigateur et les fonctions sont exécutées …. Mais l’événement load est exécuté au moment du chargement du contenu de la page dans le navigateur pour la page … .. on peut utiliser $ ou jQuery quand on utilise la méthode noconflict () dans les scripts jquery …

 $(document).ready(function(e) { // executes when HTML-Document is loaded and DOM is ready console.log("page is loading now"); }); $(document).load(function(e) { //when html page complete loaded console.log("completely loaded"); }); 

$ (window) .load est un événement qui se déclenche lorsque le DOM et tout le contenu (tout) de la page sont entièrement chargés, tels que CSS, images et frames. Un meilleur exemple est si nous voulons obtenir la taille de l’image réelle ou obtenir les détails de tout ce que nous l’utilisons.

$ (document) .ready () indique que le code qu’il contient doit être exécuté une fois que le DOM a été chargé et prêt à être manipulé par script. Il n’attendra pas le chargement des images pour l’exécution du script jQuery.

  

$ (window) .load tiré après le $ (document) .ready ().

 $(document).ready(function(){ }) //and $(function(){ }); //and jQuery(document).ready(function(){ }); 

Au-dessus de 3 sont les mêmes, $ est le nom d’alias de jQuery, vous pouvez faire face à un conflit si d’autres Frameworks JavaScript utilisent le même symbole dollar $. Si vous faites face à un conflit, l’équipe de jQuery fournit une solution sans conflit en savoir plus.

$ (window) .load est devenu obsolète en 1.8 et supprimé dans jquery 3.0