El Atributo ONLOAD

Es un evento de JavaScript que se activa cuando un recurso como una imagen, un script o la ventana del navegador termina de cargarse.

El atributo onload es un evento de JavaScript que se activa cuando un recurso (como una imagen, un script o la ventana del navegador) termina de cargarse. Es esencial para ejecutar código que depende de que ciertos elementos estén listos, como inicializar componentes, mostrar contenido o manejar recursos externos.

¿Dónde se aplica?

Funciona en elementos que cargan recursos externos o en el contexto global:

  • <body>: Cuando la página web termina de cargarse.

  • <img>: Al cargar una imagen.

  • <script>: Cuando un script externo se carga (no siempre soportado).

  • <iframe>: Al cargar el contenido del iframe.

  • window (objeto global): Al cargar toda la ventana del navegador.

Sintaxis básica

Como atributo HTML (inline):

<!-- Ejemplo en <body> -->
<body onload="console.log('Página cargada')">
  <!-- Contenido -->
</body>

<!-- Ejemplo en <img> -->
<img src="imagen.jpg" onload="console.log('Imagen lista')">

Con JavaScript (recomendado para mayor control):

// Para la ventana global
window.addEventListener("load", () => {
  console.log("Todos los recursos (imágenes, scripts) están listos");
});

// Para imágenes
const imagen = document.createElement("img");
imagen.src = "foto.jpg";
imagen.onload = () => {
  console.log("Imagen cargada, añadir al DOM");
  document.body.appendChild(imagen);
};

Ejemplos prácticos

Ejemplo 1: Ocultar "loader" al cargar la página

<div id="loader">Cargando...</div>

<script>
  window.addEventListener("load", () => {
    document.getElementById("loader").style.display = "none";
  });
</script>

Ejemplo 2: Inicializar un carrusel después de cargar imágenes

<div class="carrusel">
  <img src="slide1.jpg" onload="iniciarCarrusel()">
  <img src="slide2.jpg" onload="iniciarCarrusel()">
</div>

<script>
  let imagenesCargadas = 0;
  function iniciarCarrusel() {
    imagenesCargadas++;
    if (imagenesCargadas === 2) {
      console.log("Todas las imágenes del carrusel están listas");
    }
  }
</script>

Ejemplo 3: Cargar contenido dinámico en un iframe

<iframe 
  src="https://ejemplo.com" 
  onload="console.log('Iframe cargado')"
></iframe>

Diferencias clave entre eventos de carga

Evento Descripción Momento de activación
onload Cuando el recurso y sus dependencias están listas Al finalizar la carga completa
DOMContentLoaded Cuando el HTML está parseado (sin esperar imágenes) Inmediatamente después del HTML
onreadystatechange Para estados intermedios de carga (como en XHR) Durante la carga

Mejores prácticas

Usar addEventListener en lugar de atributos HTML:

Mejor mantenibilidad y control:

window.addEventListener("load", () => { ... });

Manejar errores con onerror:

Siempre combina onload con onerror para recursos críticos:

imagen.onerror = () => {
  console.error("Error al cargar la imagen");
  imagen.src = "imagen-respaldo.jpg";
};

Evitar bloqueos de renderizado:

No uses onload en el <body> para scripts pesados. Usa DOMContentLoaded si no dependes de imágenes:

document.addEventListener("DOMContentLoaded", () => { ... });

Casos avanzados

Precargar imágenes antes de mostrar una galería:

const imagenes = ["foto1.jpg", "foto2.jpg"];
let cargadas = 0;

imagenes.forEach(src => {
  const img = new Image();
  img.src = src;
  img.onload = () => {
    cargadas++;
    if (cargadas === imagenes.length) {
      mostrarGaleria();
    }
  };
});

function mostrarGaleria() {
  console.log("Todas las imágenes precargadas");
}

Cargar scripts dinámicamente:

function cargarScript(url, callback) {
  const script = document.createElement("script");
  script.src = url;
  script.onload = callback;
  document.head.appendChild(script);
}

cargarScript("https://code.jquery.com/jquery-3.6.0.min.js", () => {
  console.log("jQuery cargado");
});

Errores comunes

<!-- MAL: Usar en elementos que no cargan recursos -->
<div onload="..."></div> <!-- No funciona -->

<!-- CONFUSIÓN: No manejar errores -->
<img src="imagen.jpg" onload="..." onerror="..."> <!-- ¡Siempre incluye onerror! -->

<!-- BLOQUEAR LA INTERFAZ CON CÓDIGO PESADO -->
<script>
  window.onload = () => {
    // Código muy pesado que congela la página
  };
</script>

Compatibilidad

Navegador Soporte
Chrome ✅ Todas versiones
Firefox ✅ Todas versiones
Safari ✅ v3.1+
Edge ✅ Todas versiones
Móviles ✅ Sí (iOS/Android)

Conclusión

El atributo onload es esencial para:

  • Ejecutar código después de cargar recursos críticos (imágenes, scripts, iframes).
  • Mejorar la experiencia del usuario ocultando loaders o inicializando componentes.
  • Manejar operaciones que dependen de recursos externos.

Recuerda:

  1. Combínalo con onerror para manejar fallos.
  2. Usa DOMContentLoaded si solo necesitas el HTML parseado.
  3. Evita bloqueos con operaciones pesadas en onload.

¡Ahora puedes controlar la carga de recursos como un profesional!