DOMContentLoaded

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.

Bouillonne Oui
Annulable Oui (bien que spécifié comme évènement simple non annulable)
Interface Event
Propriété de gestion de l’évènement Aucune

La cible originale pour cet évènement est le Document qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface Window pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement Document: DOMContent​Loaded event.

L’évènement load, très différent, doit être utilisé uniquement pour détecter qu’une page est entièrement chargée. C’est une erreur répandue d’utiliser load là où DOMContentLoaded serait beaucoup plus approprié.

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 ou l’utilisatrice 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.

Exemples

Utilisation basique

window.addEventListener("DOMContentLoaded", (event) => {
    console.log("DOM entièrement chargé et analysé");
  });

Spécifications

Spécification Statut
HTML Living Standard Standard évolutif

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
DOMContentLoaded eventChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 9Opera Support complet 9Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi