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

Quelle est la différence entre DOMContentLoadedet les loadévénements?

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).

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 .

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).

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/

• 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

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();
    }
}