jQuery: compruebe si existe imagen

Question

Estoy cargando una ruta de imagen a través de jQuery $ .ajax y antes de mostrar la imagen me gustaría comprobar si de hecho existe. ¿Puedo usar el evento de carga de imagen/listo o algo similar para determinar que la ruta del archivo es válida?

Tras haber expuesto a .myimage display: none, estoy esperando para hacer algo como

$(".myimage").attr("src", imagePath); 
$(".myimage").load(function() { 
    $(this).show(); 
}); 

¿Es posible algo así?

Answer 1

Bueno, puede enlazar .error() manejador ...

como este,

$(".myimage").error(function(){ 
    $(this).hide(); 
}); 

así, el suyo es bien ya con load-event

$(".myimage").load(function() { 
    $(this).show(); 
}); 

el problema con esto es que si Javascript se deshabilitó la imagen nunca se mostrará ...

Answer 2

Como ya está haciendo una solicitud de AJAX, la descargo a la aplicación del lado del servidor que admite su AJAX. Es trivial verificar si existe un archivo desde el servidor, y puede establecer variables en los datos que envía para especificar resultados.

Answer 3

Un ol d hilo que sé, pero creo que podría mejorarse. Noté que OP tenía problemas intermitentes que podrían deberse a la carga de la imagen y a la comprobación de errores simultáneamente. Sería mejor dejar que la carga de la imagen primero y luego comprobar si hay errores:

$(".myimage").attr("src", imagePath).error(function() { 
    // do something 
}); 

Answer 4

Probar:

function urlExists(testUrl) { 
var http = jQuery.ajax({ 
    type:"HEAD", 
    url: testUrl, 
    async: false 
    }) 
    return http.status; 
     // this will return 200 on success, and 0 or negative value on error 
} 

a continuación, utilizar

if(urlExists('urlToImgOrAnything') == 200) { 
    // success 
} 
else { 
    // error 
} 

Answer 5

Esta pregunta se hace un par de años, pero aquí hay un mejor ejemplo de uso para el controlador de errores para cualquiera que mire esto.

$("img") 
    .error(function(){ 
    $(this).hide(); 
    }) 
    .attr("src", "image.png"); 

Debe conectar el controlador de errores antes de intentar cargar la imagen para detectar el evento.

Fuente: http://api.jquery.com/error/

Answer 6

Esto es lo que hice mío:

$.get('url/image', function(res){ 
    //Sometimes has a redirect to not found url 
    //Or just detect first the content result and get the a keyword for 'indexof' 
    if (res.indexOf('DOCTYPE') !== -1) { 
     //not exists 
    } else { 
     //exists 
    } 
});