Différence entre les événements DOMContentLoaded et load

l'événement DOMContentLoaded va s'allumer dès que la hiérarchie DOM aura été entièrement construite, l'événement load le fera lorsque toutes les images et sous-images auront fini de charger.

DOMContentLoaded fonctionne sur la plupart des navigateurs modernes, mais pas sur IE y compris IE9 et au-dessus. Il y a quelques solutions de rechange pour imiter cet événement sur les versions plus anciennes D'IE, comme l'utilisé sur la bibliothèque jQuery, ils attachent le IE spécifique onreadystatechange événement.

voir vous-même la différence:

DÉMO

From Microsoft IE

l'événement téléchargé par Domcontent se déclenche lorsque l'analyse de la page courante est terminée; l'événement de chargement se déclenche lorsque tous les fichiers ont fini de se charger à partir de toutes les ressources, y compris les annonces et les images. DOMContentLoaded est un grand événement à utiliser pour raccorder les fonctionnalités de L'interface utilisateur à des pages web complexes.

From Mozilla Developer Network

L'événement DOMContentLoaded est déclenché lorsque le document a été complètement chargé et analysé, sans attendre la fin du chargement des feuilles de style, des images et des sous-images (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 l'état de préparation pour vous. Code inclus à l'intérieur de $ (document ).ready () ne s'exécute que lorsque la page Document Object Model (DOM) est prête à exécuter le code JavaScript. Code inclus dans $ (window ).load (function () { ... }) s'exécute une fois la page entière (images ou iframes), pas seulement le DOM, est prêt.

voir: http://learn.jquery.com/using-jquery-core/document-ready /

• domContentLoaded : marque le point lorsque le DOM est prêt et il n'y a pas de feuilles de style qui bloquent L'exécution JavaScript - ce qui signifie que nous pouvons maintenant (potentiellement) construire l'arbre de rendu. Beaucoup Les cadres JavaScript attendent cet événement avant de commencer à exécuter leur propre logique. Pour cette raison, le navigateur capture les horodateurs EventStart et EventEnd pour nous permettre de suivre la durée de cette exécution. prendre.

• loadEvent : comme une étape finale dans chaque chargement de page le navigateur un événement "onload" qui peut déclencher une logique d'application supplémentaire.

source