Guías Técnicas

Eventos del Ciclo de Vida de una Página en JavaScript

  Nota

JavaScript proporciona una serie de eventos útiles para controlar el ciclo de vida de carga y descarga de una página web. Estos eventos permiten a los desarrolladores ejecutar código en momentos clave del proceso de carga y navegación, mejorando así la experiencia del usuario y la gestión de recursos.

DOMContentLoaded

El evento DOMContentLoaded se dispara cuando se ha cargado y analizado completamente el documento HTML, sin esperar a que se carguen los recursos externos como estilos CSS o imágenes.

javascript 
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM cargado y analizado");

// Aquí puedes inicializar tu aplicación o realizar otras tareas
});

Este evento es útil cuando necesitas acceder y manipular el DOM de la página tan pronto como sea posible, sin esperar a que se carguen todos los recursos.

load

El evento load se dispara cuando la página web y todos sus recursos (como imágenes, hojas de estilo y scripts) han terminado de cargar.

javascript 
window.addEventListener("load", function() {
console.log("Página y recursos cargados");

// Aquí puedes realizar tareas que requieran que toda la página esté lista
});

Este evento es útil cuando necesitas asegurarte de que todos los recursos de la página estén disponibles antes de ejecutar ciertas tareas, como inicializar un carrusel de imágenes o un reproductor de video.

beforeunload

El evento beforeunload se dispara cuando el usuario está a punto de abandonar la página. Esto puede ocurrir cuando el usuario cierra la pestaña, navega a otra página o recarga la página actual.

javascript 
window.addEventListener("beforeunload", function(event) {
event.preventDefault();
event.returnValue = "";
});

Este evento es útil cuando necesitas advertir al usuario sobre posibles pérdidas de datos no guardados, como en un formulario sin guardar o en una aplicación con estado sin persistir.

unload

El evento unload se dispara cuando la página web está a punto de ser descargada (por ejemplo, cuando el usuario navega a otra página o cierra la pestaña).

javascript 
window.addEventListener("unload", function() {
console.log("Página siendo descargada");

// Aquí puedes realizar tareas de limpieza, como cerrar conexiones o guardar datos
});

Este evento es útil cuando necesitas realizar tareas de limpieza o enviar datos al servidor antes de que la página se descargue por completo.

5. Ejemplos prácticos

Cargar contenido después de DOMContentLoaded

javascript 
document.addEventListener("DOMContentLoaded", function() {
// Obtener datos del servidor y actualizar el DOM
fetch("/api/data")
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById("data-container");
    data.forEach(item => {
      const element = document.createElement("div");
      element.textContent = item.name;
      container.appendChild(element);
    });
  });
});

Mostrar un indicador de carga con load

javascript 
const loadingIndicator = document.getElementById("loading-indicator");

window.addEventListener("load", function() {
  loadingIndicator.style.display = "none";
});

// Mostrar el indicador de carga al inicio
loadingIndicator.style.display = "block";

Advertir al usuario antes de abandonar la página

javascript 
window.addEventListener("beforeunload", function(event) {
  if (hasUnsavedChanges()) {
    event.preventDefault();
    event.returnValue = "Hay cambios sin guardar. ¿Seguro que quieres salir?";
  }
});

function hasUnsavedChanges() {
  // Lógica para comprobar si hay cambios sin guardar
  return true; // Solo para el ejemplo
}

Enviar datos al servidor antes de la descarga

javascript 
window.addEventListener("unload", function() {
  // Obtener datos que se deben enviar al servidor
  const data = {
    pageViews: getPageViews(),
    userActivity: getUserActivity()
  };

  // Enviar los datos al servidor
  navigator.sendBeacon("/api/analytics", JSON.stringify(data));
});

function getPageViews() {
  // Lógica para obtener el número de vistas de la página
  return 42;
}

function getUserActivity() {
  // Lógica para obtener la actividad del usuario
  return { lastInteraction: new Date().toISOString() };
}