jQuery: Verifica se l'immagine esiste

Question

Sto caricando un percorso immagine tramite jQuery $ .ajax e prima di mostrare l'immagine mi piacerebbe controllare se esiste effettivamente. Posso utilizzare l'evento caricamento immagine/pronto o qualcosa di simile per determinare se il percorso del file è valido?

Avendo .myimage impostato su display: none, spero di fare qualcosa di simile

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

è qualcosa di simile possibile?

Answer 1

Beh, è ​​possibile associare .error() handler ...

come questo,

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

bene, il vostro va bene già con load-event

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

il problema con questo è se Javascript era disabilitato l'immagine non verrà mai mostrata ...

Answer 2

Dato che si sta già facendo una richiesta AJAX, lo scaricherò sull'app lato server che supporta AJAX. È banale controllare se esiste un file dal server e si possono impostare variabili nei dati che si inviano per specificare i risultati.

Answer 3

An ol d filo so ma penso che potrebbe essere migliorato. Ho notato che OP ha problemi intermittenti che potrebbero essere dovuti al caricamento dell'immagine e al controllo degli errori simultaneamente. Sarebbe meglio lasciare prima il carico di immagini e quindi verificare la presenza di errori:

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

Answer 4

Prova:

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 
} 

quindi utilizzare

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

Answer 5

Questa domanda è un paio di anni, ma ecco un esempio migliore di utilizzo per il gestore degli errori per chi guarda questo.

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

È necessario collegare il gestore degli errori prima di provare a caricare l'immagine per catturare l'evento.

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

Answer 6

Questo è quello che ho fatto mio:

$.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 
    } 
});