Différence entre DOMContentLoaded et les événements de chargement


Réponses:


191

Depuis le Mozilla Developer Center :

L'événement DOMContentLoaded est déclenché lorsque le document a été entièrement chargé et analysé, sans attendre la fin du chargement des feuilles de style, des images et des sous-trames (l'événement de chargement peut être utilisé pour détecter une page entièrement chargée).


27
Pour info, le même lien MDN [maintenant] dit également: "Remarque: la feuille de style charge l'exécution du script de bloc, donc si vous avez un <script> après une <link rel =" stylesheet "...>, la page ne finira pas l'analyse - et DOMContentLoaded ne se déclenchera pas tant que la feuille de style n'aura pas été chargée. "
Nick

10
@Nick Cette page donne la raison. html5rocks.com/en/tutorials/internals/howbrowserswork Je recommanderais cependant de regarder la vidéo sur la page.
abhisekp

1
@abhisekp joli tutoriel bien que ce lien vidéo soit maintenant obsolète
supi

L'arbre de rendu est donc construit après le déclenchement de DOMContentLoaded. Mais DOMContentLoaded n'attend pas que les images / sous-ressources / sous-trames finissent de se charger selon developer.mozilla.org/en-US/docs/Web/API/Window/… . Savez-vous si ces images / sous-trames / sous-ressources sont appelées par l'arborescence de rendu après sa construction, ou étaient-elles déjà appelées par l'arborescence DOM pendant que l'arborescence de rendu était encore en cours de construction? En d'autres termes, l'arborescence de rendu déclenche-t-elle un tas de connexions pour télécharger ces images / sous-cadres / sous-ressources ou leurs téléchargements étaient déjà en cours auparavant?
weefwefwqg3

83

L' DOMContentLoadedévénement se déclenchera dès que la hiérarchie DOM sera entièrement construite, l' loadévénement le fera lorsque toutes les images et sous-cadres auront fini de se charger.

DOMContentLoadedfonctionnera sur la plupart des navigateurs modernes, mais pas sur IE, y compris IE9 et supérieur. Il existe des solutions de contournement pour imiter cet événement sur les anciennes versions d'IE, comme celles utilisées dans la bibliothèque jQuery, elles attachent l' événement spécifique d'IE onreadystatechange .


7
À quel événement faites-vous référence lorsque vous dites "Cet événement"?
Tom Hubbard

2
"Cet événement" = DOMContentLoaded. Cela ne fonctionne pas dans IE8. Si vous avez besoin de le prendre en charge, utilisez la solution de contournement à laquelle le CMS se connecte
Jan Derk

53

Voyez vous-même la différence:

DEMO

Depuis Microsoft IE

L'événement DOMContentLoaded se déclenche lorsque l'analyse de la page en cours est terminée; l'événement de chargement se déclenche lorsque tous les fichiers ont terminé le chargement à partir de toutes les ressources, y compris les annonces et les images. DOMContentLoaded est un excellent événement à utiliser pour connecter la fonctionnalité d'interface utilisateur à des pages Web complexes.

De Mozilla Developer Network

L'événement DOMContentLoaded est déclenché lorsque le document a été entièrement chargé et analysé, sans attendre la fin du chargement des feuilles de style, des images et des sous-trames (l'événement de chargement peut être utilisé pour détecter une page entièrement chargée).


Est- DOMContentLoadedce que la garantie que tous les scripts (y compris defer / async) ont été chargés? Rien n'est dit ici sur les scripts: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Sergey

@Sergey Nope. les ressources asynchrones - c'est-à-dire <script async src = app.js /> - sont chargées indépendamment du reste de la page, donc DOMContentLoaded pourrait être déclenché avant que la ressource ne soit récupérée du serveur
Mehrad Sadegh

1
@MehradSadegh Je pense que vous vous trompez! À partir de la documentation MDN : les scripts avec l'attribut defer empêcheront l'événement DOMContentLoaded de se déclencher jusqu'à ce que le script soit chargé et terminé l'évaluation. Vous pouvez jeter un oeil à cette question SO, qui le confirme: stackoverflow.com/questions/42950574/…
radzak

1
@Jatimir Je pense que les attributs de report et async ont un comportement différent.
Mehrad Sadegh

1
@Jatimir Ravi que vous ayez quand même posté, car votre contribution était exactement ce que je cherchais! Je vous remercie!
Robert Wildling

29

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 cet état de préparation pour vous. Le code inclus dans $ (document) .ready () ne s'exécutera qu'une fois que la page Document Object Model (DOM) sera prête pour l'exécution du code JavaScript. Le code inclus dans $ (window) .load (function () {...}) s'exécutera une fois que la page entière (images ou iframes), pas seulement le DOM, sera prête.

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


1
La question ne concerne pas jQuery.
user34660

4
@ user34660 Non, mais utile à comprendre.
Anderson

16
  • domContentLoaded : marque le moment où le DOM est prêt et qu'aucune feuille de style ne bloque l'exécution de JavaScript - ce qui signifie que nous pouvons maintenant (potentiellement) construire l'arborescence de rendu. De nombreux frameworks JavaScript attendent cet événement avant de commencer à exécuter leur propre logique. Pour cette raison, le navigateur capture les horodatages EventStart et EventEnd pour nous permettre de suivre la durée de cette exécution.

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

la source


Si j'ai des balises de script avec URL vers JS, se chargeraient-elles avant domContentLoaded ou après?
Pavan

0

Voici un code qui fonctionne pour nous. Nous avons constaté que MSIE était DomContentLoadedaléatoire, il semble y avoir un certain délai lorsqu'aucune ressource supplémentaire n'est mise en cache (jusqu'à 300 ms en fonction de la journalisation de notre console), et il se déclenche trop rapidement quand ils sont mis en cache. Nous avons donc eu recours à un repli pour MISE. Vous souhaitez également déclencher la doStuff()fonction, qu'elle se DomContentLoadeddéclenche avant ou après vos fichiers JS externes.

// detect MSIE 9,10,11, but not Edge
ua=navigator.userAgent.toLowerCase();isIE=/msie/.test(ua);

function doStuff(){
    //
}
if(isIE){
    // play it safe, very few users, exec ur JS when all resources are loaded
    window.onload=function(){doStuff();}
} else {
    // add event listener to trigger your function when DOMContentLoaded
    if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded',doStuff);
    } else {
        // DOMContentLoaded already loaded, so better trigger your function
        doStuff();
    }
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.