DOMContentLoaded

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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.

Événements connexes

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Shinze, jmh
 Dernière mise à jour par : Shinze,