Diferencia entre DOMContentLoaded y eventos de carga

¿Cuál es la diferencia entre DOMContentLoadedy loadeventos?

Desde el Centro de desarrolladores de Mozilla :

El evento DOMContentLoaded se activa cuando el documento se ha cargado y analizado por completo, sin esperar a que las hojas de estilo, las imágenes y los subtramas finalicen la carga (el evento de carga se puede utilizar para detectar una página completamente cargada).

El DOMContentLoadedevento se disparará tan pronto como la jerarquía DOM se haya construido completamente, el loadevento lo hará cuando todas las imágenes y subtramas hayan terminado de cargarse.

DOMContentLoadedfuncionará en la mayoría de los navegadores modernos, pero no en IE, incluido IE9 y superior. Hay algunas soluciones alternativas para imitar este evento en versiones anteriores de IE, como el utilizado en la biblioteca jQuery, adjuntan el evento específico de IE onreadystatechange .

Vea la diferencia usted mismo:

MANIFESTACIÓN

De Microsoft IE

El evento DOMContentLoaded se desencadena cuando se completa el análisis de la página actual; el evento de carga se activa cuando todos los archivos han terminado de cargarse desde todos los recursos, incluidos los anuncios y las imágenes. DOMContentLoaded es un gran evento para conectar la funcionalidad de la interfaz de usuario a páginas web complejas.

De la red de desarrolladores de Mozilla

El evento DOMContentLoaded se activa cuando el documento se ha cargado y analizado por completo, sin esperar a que las hojas de estilo, las imágenes y los subtramas finalicen la carga (el evento de carga se puede utilizar para detectar una página completamente cargada).

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

Una página no se puede manipular de manera segura hasta que el documento esté "listo". jQuery detecta este estado de preparación para usted. El código incluido dentro de $ (document) .ready () solo se ejecutará una vez que la página Document Object Model (DOM) esté lista para que se ejecute el código JavaScript. El código incluido dentro de $ (window) .load (function () {...}) se ejecutará una vez que toda la página (imágenes o iframes), no solo el DOM, esté lista.

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

• domContentLoaded : marca el punto cuando el DOM está listo y no hay hojas de estilo que bloqueen la ejecución de JavaScript, lo que significa que ahora podemos (potencialmente) construir el árbol de renderizado. Muchos marcos de JavaScript esperan este evento antes de comenzar a ejecutar su propia lógica. Por esta razón, el navegador captura las marcas de tiempo EventStart y EventEnd para permitirnos rastrear cuánto tiempo llevó esta ejecución.

• loadEvent : como paso final en cada página de carga, el navegador dispara un evento de "carga" que puede desencadenar una lógica de aplicación adicional.

fuente

Aquí hay un código que funciona para nosotros. Descubrimos que MSIE es impredecible DomContentLoaded, parece haber algún retraso cuando no se almacenan recursos adicionales en caché (hasta 300 ms según el registro de nuestra consola), y se dispara demasiado rápido cuando se almacenan en caché. Así que recurrimos a una alternativa para MISE. También desea activar la doStuff()función si se DomContentLoadedactiva antes o después de sus archivos 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();
    }
}