El Atributo ONABORT

El atributo onabort es un evento JavaScript que se activa cuando un usuario detiene manualmente la carga de un recurso externo (como una imagen, audio o video) antes de que se complete. Es útil para manejar interrupciones de carga y realizar acciones personalizadas.

¿Dónde se aplica?

Funciona en elementos que cargan recursos externos

• <img>
• <audio>
• <video>
• <object>

Sintaxis básica

<elemento onabort="miFuncion()">

Ejemplo con imagen:

<img 
  src="imagen-grande.jpg" 
  onabort="console.log('Carga de imagen cancelada')"
  alt="Imagen de ejemplo"
>

Cómo probarlo

Para activar onabort:

En navegadores:

Detén la carga manualmente:

• Haz clic en el ícono "X" (detener) mientras se carga el recurso

• Cierra la pestaña durante la carga

Programáticamente:

const img = document.querySelector('img');
img.src = ''; // Cancela la carga

Ejemplo práctico con video

<video 
  controls
  src="video-large.mp4"
  onabort="mostrarMensaje()"
>
  Tu navegador no soporta video.
</video>

<script>
  function mostrarMensaje() {
    alert('¡La carga del video fue cancelada!');
  }
</script>

Diferencias clave: onabort vs onerror

Evento	Se dispara cuando...
onabort	El usuario detiene activamente la carga
onerror	Ocurre un error durante la carga (ej: recurso no encontrado)

Uso con JavaScript moderno (addEventListener)

Alternativa recomendada para separar HTML y JavaScript:

<img id="miImagen" src="imagen.jpg" alt="Ejemplo">

document.getElementById('miImagen').addEventListener('abort', function(e) {
  console.log('Carga abortada:', e.target);
});

Casos de uso comunes

Registro de interrupciones:

function logAbort(event) {
  console.warn('Carga interrumpida:', event.target.src);
}

<img src="grafico.png" onabort="logAbort(event)">

Recargar el recurso:

<audio
  src="audio.mp3"
  onabort="this.load()"
  controls
>

Mostrar feedback al usuario:

<div id="mensaje"></div>
<video 
  src="presentacion.mp4"
  onabort="document.getElementById('mensaje').textContent = 'Carga interrumpida'"
  controls
>

Mejores prácticas

Combina con otros eventos:

<img 
  src="fondo.jpg"
  onload="console.log('Carga exitosa')"
  onerror="console.error('Error de carga')"
  onabort="console.warn('Carga cancelada')"
>

No abuses del atributo inline:

Prefiere addEventListener para código mantenible

Maneja fallos en el servidor:

Usa onerror para errores técnicos, no onabort

Limitaciones y errores comunes

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

<!-- CONFUSIÓN: No usar para detectar errores -->
<audio onabort="manejarError()"> <!-- Usa onerror en su lugar -->

<!-- OLVIDAR compatibilidad -->
<!-- onabort no funciona igual en todos los navegadores para <object> -->

Compatibilidad

• Soportado en todos los navegadores modernos (Chrome, Firefox, Safari, Edge)

• Comportamiento variable en:

  • Elementos <object>
  • Versiones antiguas de Internet Explorer (limitado a imágenes)

Conclusión

El atributo onabort es útil para:

• Detectar interrupciones de carga iniciadas por el usuario
• Ofrecer experiencias interactivas
• Realizar limpieza o reintentos de carga

Recuerda:

• No sustituye al manejo de errores técnicos (onerror)
• Úsalo junto con otros eventos para cobertura completa
• Prioriza addEventListener en proyectos grandes

¡Ahora puedes controlar las interrupciones de carga como un profesional!