Differenza tra DOMContentLoaded e eventi di caricamento

Qual'è la differenza tra DOMContentLoadede loadevents?

Dal Centro per sviluppatori Mozilla :

L'evento DOMContentLoaded viene generato quando il documento è stato completamente caricato e analizzato, senza attendere il completamento del caricamento di fogli di stile, immagini e sottoframe (l'evento di caricamento può essere utilizzato per rilevare una pagina completamente caricata).

L' DOMContentLoadedevento si attiverà non appena la gerarchia DOM sarà stata completamente costruita, l' loadevento lo farà quando tutte le immagini e i sub-frame avranno terminato il caricamento.

DOMContentLoadedfunzionerà sulla maggior parte dei browser moderni, ma non su IE incluso IE9 e versioni successive. Esistono alcune soluzioni alternative per imitare questo evento nelle versioni precedenti di IE, come quelle utilizzate nella libreria jQuery, che collegano l' evento specifico di IE onreadystatechange .

Vedi tu stesso la differenza:

DEMO

Da Microsoft IE

L'evento DOMContentLoaded viene generato al termine dell'analisi della pagina corrente; l'evento load viene generato quando tutti i file hanno terminato il caricamento da tutte le risorse, inclusi annunci e immagini. DOMContentLoaded è un grande evento da utilizzare per collegare la funzionalità dell'interfaccia utente a pagine Web complesse.

Dalla rete di sviluppatori Mozilla

L'evento DOMContentLoaded viene generato quando il documento è stato completamente caricato e analizzato, senza attendere il completamento del caricamento di fogli di stile, immagini e sottoframe (l'evento di caricamento può essere utilizzato per rilevare una pagina completamente caricata).

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

Una pagina non può essere manipolata in modo sicuro fino a quando il documento non è "pronto". jQuery rileva questo stato di prontezza per te. Il codice incluso in $ (document) .ready () verrà eseguito solo quando la pagina Document Object Model (DOM) è pronta per l'esecuzione del codice JavaScript. Il codice incluso in $ (window) .load (function () {...}) verrà eseguito una volta che l'intera pagina (immagini o iframe), non solo il DOM, è pronta.

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

• domContentLoaded : segna il punto in cui entrambi i DOM sono pronti e non ci sono fogli di stile che bloccano l'esecuzione di JavaScript, il che significa che ora possiamo (potenzialmente) costruire l'albero di rendering. Molti framework JavaScript attendono questo evento prima di iniziare a eseguire la propria logica. Per questo motivo il browser acquisisce i timestamp EventStart ed EventEnd per consentirci di tenere traccia del tempo impiegato per l'esecuzione.

• loadEvent : come passaggio finale in ogni caricamento della pagina, il browser genera un evento "onload" che può attivare la logica dell'applicazione aggiuntiva.

fonte

Ecco del codice che funziona per noi. Abbiamo riscontrato che MSIE è da non perdere DomContentLoaded, sembra che ci sia un certo ritardo quando non vengono memorizzate nella cache risorse aggiuntive (fino a 300 ms in base alla registrazione della nostra console) e si innesca troppo velocemente quando vengono memorizzate nella cache. Quindi abbiamo fatto ricorso a un fallback per MISE. Si desidera inoltre attivare la doStuff()funzione se si DomContentLoadedattiva prima o dopo i file JS esterni.

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