Como podria saber cuando una imagen exista o se cargo en el navegador con javascript
y Jquery
, seria un ejemplo como este;
Esto para cargar una imagen alternativa en caso de que la imagen no exista, algo como IMAGE NOT FOUND
.
He logrado solucionar esto de la siguiente manera;
Un sencillo script
$(document).ready(function(){
/**
* Determinar si una imagen existe por la propiedad naturalHeight
* la cual sera diferente de 0 si esta existe
**/
$('img').each(function(){
if($(this)[0].naturalHeight == 0){
$(this).attr('src','images/image_not_found.jpg');
}
});
});
Logre dar con esta solucion a travez de la propiedad naturalHeight
la cual debe ser diferente de 0 si la imagen existe, por muy pequeña que sea la imagen debe de tener una altura.
Quizas no sea la mejor manera pero si tienes un proyecto "grande" muchas veces javascript
es una solución.
Las imágenes (etiquetas <img>
), cuando trabajas con el DOM, son objetos del tipo HTMLImageElement. Este elemento puede hacer uso de los eventos "onerror" y "onload":
const imgs=Array.from(document.querySelectorAll('img'));
imgs.forEach(i => i.addEventListener('error',event => {
console.log('Falló la carga de', event.target.src);
})
);
<img src="http://via.placeholder.com/350x150"/>
<img src="http://falla.noexisto.doh"/>
El problema aquí sería que el javascript que añade los listeners se pueda cargar más tarde que las imágenes, con lo que estos errores no se detectarían, pero es un método útil cuando estás inyectando imágenes en el DOM tras la carga de la página.
javascript
Commented
el 9 oct. 2018 a las 14:54
Me parece muy interesante tu solución. Otra manera de hacer sería aprovechar el evento onerror. Lanzado sobre una imagen se dispararía cuando el enlace devolviese un error de ruta.
JS
function reemplaza_imagen(imagen) {
imagen.onerror = "";
imagen.src = "/imagenes/imagen_error_carga.png";
return true;
}
HTML
<img src="image.png" onerror="reemplaza_imagen(this);"/>
Yo sé que llego tarde, sin embargo tengo algo mucho más sencillo que he implementado hace poco en un proyecto personal.
En la etiqueta img puedes colocar el evento onerror y agregarle la imagen, sin tener que recurrir a escribir más código en un archivo js.
<img src="/ruta/imagen.png" onerror="this.src='/ruta/respaldo.png'"/>
No tienes que declarar ninguna función ni usar JQuery, el this hace referencia a la etiqueta img, y al ser un objeto, posee el evento onerror.
Con el evento error
del DOM puedes manejar esto.
ElementoImg.addEventListener('error', e => {
ElementoImg.src = '/404.jpg' //Esto es una imagen de respaldo que se supone estás seguro de que existe
})
En la etiqueta img puedes agregar el atributo onerror = "function()"
de igual manera.
<img src="img/mi-imagen.jpg" onerror="myfunction()">
Esta última opción no me sirvió cuando incrustaba código html con javascript. Agregar el evento como en el primer ejemplo luego de incrustar el html me funcionó.