Buscar..


Página, DOM y navegador cargando

Este es un ejemplo para explicar las variaciones de los eventos de carga.

  1. evento onload
<body onload="someFunction()">
<img src="image1" />
<img src="image2" />
</body>

<script>
    function someFunction() {
    console.log("Hi! I am loaded");
}
</script>

En este caso, el mensaje se registra una vez que todos los contenidos de la página, incluidas las imágenes y las hojas de estilo (si corresponde ) se hayan cargado por completo.

  1. Evento DOMContentLoaded

    document.addEventListener("DOMContentLoaded", function(event) {
        console.log("Hello! I am loaded");
    });
    

En el código anterior, el mensaje se registra solo después de cargar el DOM / documento ( es decir, una vez que se construye el DOM ).

  1. Función anónima auto invocada

    (function(){
        console.log("Hi I am an anonymous function! I am loaded");
    })();
    

Aquí, el mensaje se registra tan pronto como el navegador interpreta la función anónima. Esto significa que esta función puede ejecutarse incluso antes de que se cargue el DOM.



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow