Rileva se l'immagine è rotto in Javascript

Question

Sto aggiungendo immagini per una tela HTML5 utilizzando Javascript:

img = new Image(); 
img.addEventListener('load', loadCallBack, false); 
img.src = image_url; 

E poi loadCallBack disegna l'immagine.

Il problema è che a volte lo image_url si riferisce a un'immagine spezzata o inesistente. Quando ciò accade, ottengo un errore 404 nella console e l'immagine sulla tela rimane bianca. Invece, mi piacerebbe essere in grado di sostituire l'attributo src dell'immagine con un altro image_url.

Ho provato quanto segue e non ha funzionato:

img.addEventListener("error", function(){console.log("404");}); 

Come posso rilevare i 404s delle immagini?

Nota: Sto ancora cercando una soluzione, poiché nessuno dei due postati finora ha funzionato.

Answer 1

Lavori in jQuery per me ... http://jsfiddle.net/5v2qG/

img = new Image(); 
$(img).bind('error', function() { 
     alert('error called');             
}); 
img.src = "invalid_img_name.png";​ 

Answer 2

Lo stesso codice di risposta del Kostia: solo per confrontare la bruttezza di jQuery e la bellezza di javascript vaniglia: