Quelle est la différence entre DOMContentLoaded y load des événements ?
De la Centre des développeurs Mozilla :
L'événement DOMContentLoaded est déclenché lorsque le document a été complètement chargé et analysé, sans attendre que les feuilles de style, les images, et les sous-cadres aient fini de se charger (l'événement load peut être utilisé pour détecter une page entièrement chargée).
Pour info, le même lien MDN [maintenant] dit aussi : "Note : Les chargements de feuilles de style bloquent l'exécution de script, donc si vous avez un <script> après un <link rel="stylesheet" ...>, la page ne terminera pas l'analyse - et DOMContentLoaded ne se déclenchera pas - jusqu'à ce que la feuille de style soit chargée".
Nick Cette page en donne la raison. html5rocks.com/fr/tutorials/internals/howbrowserswork Je vous recommande cependant de regarder la vidéo dans la page.
El DOMContentLoaded se déclenchera dès que la hiérarchie DOM aura été entièrement construite, l'événement load le fera lorsque toutes les images et les sous-cadres auront fini de se charger.
DOMContentLoaded fonctionnera sur la plupart des navigateurs modernes, mais pas sur IE y compris IE9 et plus. Il y a quelques solutions de contournement pour imiter cet événement sur les anciennes versions d'IE, comme celles utilisées par la bibliothèque jQuery, ils attachent la balise Spécifique à l'IE onreadystatechange événement.
Constatez vous-même la différence :
De Microsoft IE
L'événement DOMContentLoaded se déclenche lorsque l'analyse syntaxique de la page actuelle est terminée ; l'événement load se déclenche lorsque le chargement de tous les fichiers de toutes les ressources, y compris les publicités et les images, est terminé. L'événement DOMContentLoaded est un excellent moyen de connecter des fonctionnalités d'interface utilisateur à des pages Web complexes.
De Réseau de développeurs Mozilla
L'événement DOMContentLoaded est déclenché lorsque le document a été entièrement chargé et analysé, sans attendre la fin du chargement des feuilles de style, des images et des sous-cadres (l'événement load peut être utilisé pour détecter une page entièrement chargée).
Fait DOMContentLoaded garantir que tous les scripts (y compris defer/async) ont été chargés ? Rien n'est dit ici sur les scripts : developer.mozilla.org/fr-US/docs/Web/Events/DOMContentLoaded
Les ressources asynchrones - c'est-à-dire <script async src=app.js/> - sont chargées indépendamment du reste de la page, donc DOMContentLoaded peut être déclenché avant que la ressource ne soit récupérée du serveur.
@MehradSadegh Je pense que vous avez tort ! De Documentation MDN : Les scripts avec l'attribut defer empêcheront l'événement DOMContentLoaded de se déclencher jusqu'à ce que le script ait été chargé et ait terminé son évaluation. Vous pouvez jeter un coup d'œil à cette question SO, qui le confirme : stackoverflow.com/questions/42950574/
DOMContentLoaded == window.onDomReady()
Load == window.onLoad()
Une page ne peut pas être manipulée en toute sécurité tant que le document n'est pas "prêt". jQuery détecte cet état de préparation pour vous. Code inclus dans
$(document).ready()ne s'exécutera qu'une fois que le Document Object Model (DOM) de la page sera prêt à être exécuté par le code JavaScript. Le code inclus dans$(window).load(function() { ... })s'exécutera une fois que la page entière (images ou iframes), et pas seulement le DOM, sera prête.
Voir : Utilisation de la documentation prête à l'emploi de JQuery Core .
domContentLoaded : marque le moment où à la fois le DOM est prêt et où il n'y a pas de feuilles de style qui bloquent l'exécution de JavaScript - ce qui signifie que nous pouvons maintenant (potentiellement) construire l'arbre de rendu. Beaucoup de JavaScript attendent cet événement avant de commencer à exécuter leur propre logique. C'est pour cette raison que le navigateur saisit les horodatages EventStart et EventEnd pour nous permettre de suivre la durée de cette exécution. a pris.
loadEvent : à la dernière étape du chargement de chaque page, le navigateur déclenche un événement "onload" qui peut déclencher une logique d'application supplémentaire.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
2 votes
Un bon article Cycle de vie de la page : DOMContentLoaded, load, beforeunload, unload .