Différence entre les événements DOMContentLoaded et load
Quelle est la différence entre les événements DOMContentLoaded et load?
Depuis le Mozilla Developer Center :
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-trames soient complètement chargés (l'événement load peut être utilisé pour détecter une page entièrement chargée).
L'événement DOMContentLoaded se déclenchera dès que la hiérarchie DOM aura été entièrement construite. L'événement load le fera une fois le chargement de toutes les images et sous-images terminé.
DOMContentLoaded fonctionnera sur la plupart des navigateurs modernes, mais pas sur IE y compris IE9 et ci-dessus. Il y a quelques solutions de contournement pour imiter cet événement sur les anciennes versions d'IE, comme celui utilisé dans la bibliothèque jQuery, ils attachent le spécifique à IE onreadystatechange événement.
Voyez vous-même la différence:
De Microsoft IE
L'événement DOMContentLoaded est déclenché lorsque l'analyse de la page en cours est terminée. l'événement de chargement se déclenche lorsque tous les fichiers, y compris les annonces et les images, ont fini de se charger. DOMContentLoaded est un excellent événement à utiliser pour connecter la fonctionnalité 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é complètement chargé et analysé, sans attendre que les feuilles de style, les images et les sous-trames soient complètement chargés (l'événement load peut être utilisé pour détecter une page entièrement chargée).
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. Le code inclus dans $ (document) .ready () ne sera exécuté que lorsque la page Document Object Model (DOM) sera prête pour l'exécution du code JavaScript. Le code inclus dans $ (window) .load (function () {...}) sera exécuté une fois que la page entière (images ou iframes), pas seulement le DOM, sera prête.
Voir: http://learn.jquery.com/using-jquery-core/document-ready/
domContentLoaded : marque le moment où le DOM est prêt et qu'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 le rendu. arbre. De nombreux frameworks JavaScript attendent cet événement avant de commencer à exécuter leur propre logique. Pour cette raison, le navigateur capture les horodatages EventStart et EventEnd pour nous permettre de suivre la durée de cette exécution.
loadEvent : à la fin de chaque chargement de page, le navigateur déclenche un événement "onload" pouvant déclencher une logique d'application supplémentaire.