✨ ¡Excelente momento para conectar! Estoy disponible para tu próximo proyecto. No más esperas ni complicaciones. Te ofrezco desarrollo ágil, comunicación clara y resultados que superan expectativas. Conversemos sobre cómo puedo impulsar tu idea.

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