3

Como podria saber cuando una imagen exista o se cargo en el navegador con javascript y Jquery, seria un ejemplo como este;

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Esto para cargar una imagen alternativa en caso de que la imagen no exista, algo como IMAGE NOT FOUND.

5 respuestas 5

6

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');
        }
    });
});

introducir la descripción de la imagen aquí

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.

6

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.

1
  • Me parece bastante interesante tu ejemplo ya que haces uso de vanilla javascript Commented el 9 oct. 2018 a las 14:54
2

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);"/>
3
  • Esa fue mi primera opción pero jamas logre hacerlo funcionar :( Commented el 9 oct. 2018 a las 14:46
  • 1
    Pues tienes razón. No funciona. Esta deprecada desde la versión 1.8 de Jquery y borrada desde la 3.0. Pero estoy seguro de que tiene que haber algo parecido, a ver si luego tengo un rato y lo miro con más detenimiento.
    – phpMyGuel
    Commented el 9 oct. 2018 a las 15:11
  • 1
    Encontré esta solución con JS puro y a través de un evento onerror lanzado desde HTML: jsfiddle.net/oLqfxjoz Aun así estoy seguro de que tiene que haber una alternativa desde Jquery al evento .error().
    – phpMyGuel
    Commented el 9 oct. 2018 a las 15:21
2

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.

1

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ó.

1
  • Ok, editaré el comentario... Commented el 6 oct. 2020 a las 7:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.