jQuery per controllare l'immagine esistente se la testina 404 la nasconde

Question

Utilizzare php per ottenere l'URL di 100 foto da un db e mostrarle in una pagina, ma alcune foto potrebbero non esistere più. Se l'url della foto è fallito (404) Voglio usare jquery per nascondere l'immagine e non voglio mostrare alcuna immagine di errore. Questo è il mio codice ma non funziona.

html

<div id=test> 
    <img src="http://test.com/test1.jpg" /> 
    <img src=" http://test.com/test2.jpg" /> 
    <img src="http://test.com/test3.jpg" /> 
</div> 

jquery

var pic_list = jQuery("#test img"); 

pic_list.load(function() { 
    var http = new XMLHttpRequest(); 
    http.open('HEAD', pic_list, false); 
    http.send(); 
    if (http.status == 404) { 
     pic_list.hide(); 
    } else { 
     pic_list.show(); 
    } 
}); 

Answer 1

Il secondo parametro del metodo open è un URL, non un array di elementi HTML.

Quindi è possibile utilizzare each per iterare sugli elementi, ottenere l'attributo src utilizzando .attr() e passarlo nel metodo.

Dal momento che avete le immagini caricate già, invece di fare una nuova richiesta per ciascuno di essi, si potrebbe essere in grado di utilizzare un metodo ho discusso in un'altra domanda: Check if user is blocking 3rd party domain

Se le immagini non sono di altezza fissa/larghezza, un'immagine inesistente produrrà una piccola icona che indica che l'immagine non esiste. È possibile utilizzare la dimensione dell'immagine per vedere se l'immagine è stata caricata o meno.

Answer 2

L'invio di multipli richieste ajax non è necessario quando è possibile utilizzare l'evento onerror.

Controllare il relativo post jQuery/Javascript to replace broken images.

adattamento che alle vostre esigenze:

HTML:

<img src="someimage.png" onerror="imgError(this);" /> 

JS:

function imgError(image){ 
    image.style.display = 'none'; 
} 

Fiddle

oppure con jQuery:

function imgError(image){ 
    $(image).hide(); 
} 

---

normalmente non userei linea JS nel codice HTML, e persino pensato di utilizzare un gestore .error:

$('#test img').error(function() { 
    $(this).hide(); 
}); 

Ma quanto sopra non funziona se il gestore è allegando eseguito dopo che l'evento di errore è stato attivato, quindi suggerisco la prima soluzione.