L’évènement DOMContentLoaded est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger. L’évènement load, très différent, doit être utilisé uniquement pour détecter une page entièrement chargée. C’est une erreur très répandue d’utiliser load quand DOMContentLoaded serait beaucoup plus approprié, alors soyez prudents.

Note : Le JavaScript synchrone interromp l’analyse du DOM.

Note : Il existe également de nombreuses bibliothèques indépendantes à usage général qui offrent des méthodes multi-navigateur pour détecter quand le DOM est prêt.

Accélérer

Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur a demandé la page, vous pouvez rendre votre JavaScript asynchrone et optimiser le chargement des feuilles de style. Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal.

Informations générales

Spécification
HTML5
Interface
Event
Bouillonne
Oui
Annulable
Oui (bien que spécifié comme un évènement simple non annulable)
Cible
Document
Action par défaut
Aucune.

Propriétés

Property Type Description
target Lecture seule EventTarget The event target (the topmost target in the DOM tree).
type Lecture seule DOMString The type of event.
bubbles Lecture seule Boolean Whether the event normally bubbles or not.
cancelable Lecture seule Boolean Whether the event is cancellable or not.

Exemple

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM entièrement chargé et analysé");
  });

for (var i=0; i<1000000000; i++) {
  /* ce script synchrone va retarder l’analyse du DOM.
     Donc l’évènement DOMContentLoaded va se lancer plus tard. */
}
</script>

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0[1] 1.0 (1.7 ou moins)[1] 9.0[2] 9.0 3.1[1]
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base (Oui)[1] 1.0 (1)[1] ?[2] (Oui) (Oui)[1]

[1] Le bouillonnement pour cet évènement est supporté par au moins Gecko 1.9.2, Chrome 6, et Safari 4.

[2] Internet Explorer 8 prend en charge l’évènement readystatechange, qui peut être utilisé pour détecter quand le DOM est prêt. Dans les versions antérieures d’Internet Explorer, cet état peut être détecté en essayant à plusieurs reprises d’exécuter document.documentElement.doScroll("left");, qui lancera une erreur jusqu’à ce que le DOM soit prêt.

Évènements connexes

Étiquettes et contributeurs liés au document

Contributeurs à cette page : fscholz, Watilin, zede-master, Gastonite, Shinze, jmh
Dernière mise à jour par : fscholz,