Evento cuando cargue la página en JavaScript
En este tutorial aprenderemos cómo definir un evento cuando cargue la página en JavaScript.
En JavaSCript existen dos eventos que podemos utilizar para ejecutar acciones cuando la página esté cargada.
- Evento DOMContentLoaded
- Evento load
Evento DOMContentLoaded
El evento funciona de una manera similar a la función document.ready de jQuery, pero en este caso para el lenguaje JavaScript puro y se utiliza para ejecutar acciones una vez que la página esté completamente cargada. Esto no incluye recursos externos como imágenes o archivos css.
Ejemplo
// Evento que se ejecutará una vez que la página esté cargada completamente
document.addEventListener("DOMContentLoaded", function(event) {
// Acciones a realizar
});
Este evento se suele definir en el propio documento HTML entre las etiquetas script. Veamos un ejemplo
Ejemplo
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Título de la página</title>
</head>
<body>
<div class="content">
<p>Contenido de la página</p>
</div>
<script>
// Evento que se ejecutará una vez que la página esté cargada completamente
document.addEventListener("DOMContentLoaded", function(event) {
// Acciones a realizar
});
</script>
</body>
</html>
Evento load
El evento load es similar a DOMContentLoaded pero se ejecuta cuando la página y los recursos externos están completamente cargados.
Ejemplo
window.onload = function() {
// Acciones a realizar
};
También lo podemos declarar el evento load de la siguiente forma
window.addEventListener('load', (event) => {
// Acciones a realizar
});