Diferença entre eventos DOMContentLoaded e load

Qual é a diferença entre DOMContentLoadede loadevents?

No Mozilla Developer Center :

O evento DOMContentLoaded é acionado quando o documento é completamente carregado e analisado, sem aguardar que folhas de estilo, imagens e sub-quadros terminem de carregar (o evento load pode ser usado para detectar uma página totalmente carregada).

O DOMContentLoadedevento será acionado assim que a hierarquia do DOM for totalmente construída, o loadevento será executado quando todas as imagens e subquadros tiverem terminado o carregamento.

DOMContentLoadedfuncionará nos navegadores mais modernos, mas não no IE, incluindo o IE9 e superior. Existem algumas soluções alternativas para imitar esse evento em versões mais antigas do IE, como as usadas na biblioteca jQuery, elas anexam o evento específico do IEonreadystatechange .

Veja a diferença você mesmo:

DEMO

Do Microsoft IE

O evento DOMContentLoaded é acionado quando a análise da página atual é concluída; o evento load é acionado quando todos os arquivos terminam de carregar de todos os recursos, incluindo anúncios e imagens. DOMContentLoaded é um ótimo evento para conectar a funcionalidade da interface do usuário a páginas da web complexas.

Da Rede de Desenvolvedores Mozilla

O evento DOMContentLoaded é acionado quando o documento é completamente carregado e analisado, sem aguardar que folhas de estilo, imagens e sub-quadros terminem de carregar (o evento load pode ser usado para detectar uma página totalmente carregada).

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

Uma página não pode ser manipulada com segurança até que o documento esteja "pronto". O jQuery detecta esse estado de prontidão para você. O código incluído em $ (document) .ready () será executado apenas quando a página DOM (Document Object Model) estiver pronta para a execução do código JavaScript. O código incluído em $ (window) .load (function () {...}) será executado assim que a página inteira (imagens ou iframes), não apenas o DOM, estiver pronta.

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

• domContentLoaded : marca o ponto em que o DOM está pronto e não há folhas de estilo que estejam bloqueando a execução do JavaScript - o que significa que agora podemos (potencialmente) construir a árvore de renderização. Muitas estruturas JavaScript aguardam esse evento antes de começarem a executar sua própria lógica. Por esse motivo, o navegador captura os registros de data e hora EventStart e EventEnd para permitir rastrear quanto tempo essa execução levou.

• loadEvent : como uma etapa final em cada carregamento de página, o navegador dispara um evento "onload" que pode disparar lógica de aplicativo adicional.

fonte

Aqui está um código que funciona para nós. Descobrimos que o MSIE é um problema DomContentLoaded, parece que há algum atraso quando nenhum recurso adicional é armazenado em cache (até 300ms com base no log do console) e é acionado muito rápido quando eles são armazenados em cache. Por isso, recorremos a um substituto para o MISE. Você também deseja acionar a doStuff()função, seja acionada DomContentLoadedantes ou depois dos arquivos JS externos.

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