Unterschied zwischen DOMContentLoaded- und Ladeereignissen

Was ist der Unterschied zwischen DOMContentLoadedund loadEreignissen?

Aus dem Mozilla Developer Center :

Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das Dokument vollständig geladen und analysiert wurde, ohne darauf zu warten, dass Stylesheets, Bilder und Unterrahmen vollständig geladen sind (das Ladeereignis kann zum Erkennen einer vollständig geladenen Seite verwendet werden).

Das DOMContentLoadedEreignis wird ausgelöst, sobald die DOM-Hierarchie vollständig erstellt wurde. Das loadEreignis führt dies aus, wenn alle Bilder und Unterrahmen vollständig geladen wurden.

DOMContentLoadedfunktioniert auf den meisten modernen Browsern, jedoch nicht auf IE einschließlich IE9 und höher. Es gibt einige Problemumgehungen , um dieses Ereignis in älteren IE-Versionen nachzuahmen, wie die in der jQuery-Bibliothek verwendeten, die das IE-spezifische onreadystatechange Ereignis anhängen .

Sehen Sie den Unterschied selbst:

DEMO

Von Microsoft IE

Das Ereignis DOMContentLoaded wird ausgelöst, wenn das Parsen der aktuellen Seite abgeschlossen ist. Das Ladeereignis wird ausgelöst, wenn alle Dateien aus allen Ressourcen, einschließlich Anzeigen und Bildern, vollständig geladen wurden. DOMContentLoaded ist ein großartiges Ereignis, um die UI-Funktionalität mit komplexen Webseiten zu verbinden.

Aus dem Mozilla Developer Network

Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das Dokument vollständig geladen und analysiert wurde, ohne darauf zu warten, dass Stylesheets, Bilder und Unterrahmen vollständig geladen sind (das Ladeereignis kann zum Erkennen einer vollständig geladenen Seite verwendet werden).

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

Eine Seite kann erst sicher bearbeitet werden, wenn das Dokument "fertig" ist. jQuery erkennt diesen Bereitschaftszustand für Sie. In $ (document) .ready () enthaltener Code wird erst ausgeführt, wenn die Seite Document Object Model (DOM) für die Ausführung von JavaScript-Code bereit ist. Der in $ (window) .load (function () {...}) enthaltene Code wird ausgeführt, sobald die gesamte Seite (Bilder oder Iframes) und nicht nur das DOM fertig ist.

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

• domContentLoaded : Markiert den Punkt, an dem sowohl das DOM bereit ist als auch keine Stylesheets vorhanden sind, die die JavaScript-Ausführung blockieren. Dies bedeutet, dass wir jetzt (möglicherweise) den Renderbaum erstellen können. Viele JavaScript-Frameworks warten auf dieses Ereignis, bevor sie ihre eigene Logik ausführen. Aus diesem Grund erfasst der Browser die Zeitstempel EventStart und EventEnd, damit wir verfolgen können, wie lange diese Ausführung gedauert hat.

• loadEvent : Als letzten Schritt beim Laden jeder Seite löst der Browser ein "Onload" -Ereignis aus, das zusätzliche Anwendungslogik auslösen kann.

Quelle

Hier ist ein Code, der für uns funktioniert. Wir haben festgestellt, dass MSIE ein Hit und Miss DomContentLoadedist. Es scheint eine gewisse Verzögerung zu geben, wenn keine zusätzlichen Ressourcen zwischengespeichert werden (bis zu 300 ms basierend auf unserer Konsolenprotokollierung), und es wird zu schnell ausgelöst, wenn sie zwischengespeichert werden. Also haben wir auf einen Fallback für MISE zurückgegriffen. Sie möchten die doStuff()Funktion auch auslösen , unabhängig davon, ob sie DomContentLoadedvor oder nach Ihren externen JS-Dateien ausgelöst wird .

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