viernes, 9 de agosto de 2013

Cómo cargar una imagen de error

Valencia, 09/08/2013 Gatsu

Desde hace tiempo llevo viendo en muchas páginas web que si una imagen no se carga correctamente porque la ruta que tiene no es válida (lo normal es porque haya dejado de existir), se cargue una imagen de error, pero claro, solo se carga si no existe la imagen original, y hoy he descubierto cual es el truco, ni frameworks ni librerías, el simple evento de la etiqueta img onerror.

onerror es un evento como onclick, onload,... que en cuanto se cumple su condición, ejecuta la sentencia que lleve, de normal javascript, y claro, en ese momento podemos hacer un pequeño script que cambie el atributo src de la imagen por una ruta que contenga una imagen de error y chapuza solucionada. Un ejemplo sencillo sería el siguiente:

function errorImagen(){
    $("#imagen").attr("src","imagen/error.jpg");
}

Con ese código solo necesitaríamos añadir la función al evento onerror:

<img src="http://ruta-mala" onerror="javascript:errorImagen();" alt="" title="" />