Menú Cerrar

Detectar errores al cargar imágenes con Javascript

Lo tradicional cuando hay algún error en una imagen de una página web es ver un icono genérico típico ocupando el espacio donde debería estar la imagen, cada navegador lo presenta de una forma. Esto no suele quedar bien. Con un poco de Javascript se pueden detectar los errores al cargar las imágenes y por ejemplo eliminarlas o presentar el error como se quiera.

Hay tres eventos que se pueden escuchar mediante Javascript, para poder actuar según lo que haya pasado. Los eventos que nos interesan son:

  • onload: Se ejecuta al cargarse la imagen.
  • onerror: Se ejecuta al ocurrir un error.
  • onabort: Se ejecuta si se aborta la carga.

La forma básica podría ser:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
    <script>
	window.onload = function() {
		var imagen = new Image();
		imagen.src = "algo.jpg";

		imagen.onload = function(){ 
			contenedor = document.getElementById("contenedor");
	        contenedor.appendChild(imagen);
			alert("Imagen cargada");
			
		}

		imagen.onerror = function(){
			alert("Error en imagen");
		}

		imagen.onabort = function(){
			alert("Imagen abortada");
		}
	}
    </script>
</head>
<body>
	<div id="contenedor"></div>
</body>
</html>

Dentro de las funciones manejadoras de los eventos podremos hacer lo que se necesite. En este ejemplo básico se abrirá un mensaje en un popup con alert() y en el caso de que no haya ningún problema añadirá la imagen al div «contenedor».

Y poco más hay que añadir. Con estas opciones disponibles los preloads pueden convertirse en algo más que una carga de imágenes recorriendo un array, es cuestión de las necesidades.