DOMContentLoaded

L'événement DOMContentLoaded est déclenché lorsque le document HTML initial a été complètement chargé et analysé, sans attendre les feuilles de style, images et sous-trames pour terminer le chargement. Un événement très différente - load - doit être utilisé seulement 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 : Javascript Synchrone arrête l'analyse du DOM.

Note : Il y a aussi beaucoup d'usage général et des bibliothèques autonomes qui offrent des méthodes multi-navigateur pour indiqué que le DOM est prêt.

Accélérer

Si vous voulez analyser rapidement le DOM après que l'utilisateur eu demandé la page, vous pouvez transformer votre JavaScript asynchrone et optimiser le chargement des feuilles de style qui, si elle est utilisée comme d'habitude, ralentira le chargement de la page.

Information générale

Specification: HTML5
Interface: Event
Bubbles: Yes
Cancelable: Oui (bien spécifié comme un événement simple non résiliable)
Target: Document
Action par défaut: Aucune.

Propriétés

Propriété	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 fully loaded and parsed");
  });

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>

caractéristique	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]

caractéristique	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
support de base	(Oui)^[1]	1.0 (1)^[1]	?^[2]	(Oui)	(Oui)^[1]

[1] Bubbling pour cet événement est soutenu par au moins Gecko 1.9.2, Chrome 6, et Safari 4.

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