Rileva quando un'immagine non riesce a caricare in Javascript

Question

C'è un modo per determinare se un percorso immagine conduce a un'immagine reale, cioè rilevare quando un'immagine non riesce a caricare in Javascript.

Per un'applicazione Web, sto analizzando un file xml e creando dinamicamente immagini HTML da un elenco di percorsi immagine. Alcuni percorsi di immagine potrebbero non esistere più sul server, quindi voglio fallire con grazia rilevando quali immagini non riescono a caricare ed eliminare quell'elemento HTML img.

Nota Le soluzioni JQuery non possono essere utilizzate (il capo non desidera utilizzare JQuery, sì, so che non è necessario avviarlo). Conosco un modo in JQuery per rilevare quando viene caricata un'immagine, ma non se ha fallito.

Il mio codice per creare elementi img, ma come posso rilevare se il percorso img porta a un caricamento non riuscito dell'immagine?

var imgObj = new Image(); // document.createElement("img"); 
imgObj.src = src; 

Answer 1

Si potrebbe provare il seguente codice. Non posso garantire la compatibilità con il browser, quindi dovrai testarlo.

function testImage(URL) { 
    var tester=new Image(); 
    tester.onload=imageFound; 
    tester.onerror=imageNotFound; 
    tester.src=URL; 
} 

function imageFound() { 
    alert('That image is found and loaded'); 
} 

function imageNotFound() { 
    alert('That image was not found.'); 
} 

testImage("http://foo.com/bar.jpg"); 

E le mie simpatie per il capo jQuery-resistente!

Answer 2

Ecco una funzione che ho scritto per un'altra risposta: Javascript Image Url Verify. Non so se è esattamente ciò di cui hai bisogno, ma utilizza le varie tecniche che utilizzeresti quali gestori per onload, onerror, onabort e un timeout generale.

Poiché il caricamento dell'immagine è asincrono, si chiama questa funzione con l'immagine e quindi chiama il callback più tardi con il risultato.

Answer 3

proprio come di seguito:

var img = new Image(); 
img.src = imgUrl; 

if (!img.complete) { 

//has picture 
} 
else //not{ 

} 

Answer 4

La risposta è bello, ma introduce un problema. Ogni volta che si assegna direttamente onload o onerror, è possibile sostituire la richiamata che è stata assegnata in precedenza. Ecco perché c'è un buon metodo che "registra il listener specificato sul EventTarget chiamato" come si dice su MDN. Puoi registrare quanti più ascoltatori vuoi sullo stesso evento.

Lasciatemi riscrivere la risposta un po '.

function testImage(url) { 
    var tester = new Image(); 
    tester.addEventListener('load', imageFound); 
    tester.addEventListener('error', imageNotFound); 
    tester.src = url; 
} 

function imageFound() { 
    alert('That image is found and loaded'); 
} 

function imageNotFound() { 
    alert('That image was not found.'); 
} 

testImage("http://foo.com/bar.jpg"); 

Poiché il processo di risorsa carico esterno è asincrona, sarebbe ancora più bello da usare JavaScript moderna con promesse, come quelli che seguono.

function testImage(url) { 

    // Define the promise 
    const imgPromise = new Promise(function imgPromise(resolve, reject) { 

     // Create the image 
     const imgElement = new Image(); 

     // When image is loaded, resolve the promise 
     imgElement.addEventListener('load', function imgOnLoad() { 
      resolve(this); 
     }); 

     // When there's an error during load, reject the promise 
     imgElement.addEventListener('error', function imgOnError() { 
      reject(); 
     }) 

     // Assign URL 
     imgElement.src = url; 

    }); 

    return imgPromise; 
} 

testImage("http://foo.com/bar.jpg").then(

    function fulfilled(img) { 
     console.log('That image is found and loaded', img); 
    }, 

    function rejected() { 
     console.log('That image was not found'); 
    } 

); 

Answer 5

/** 
* Tests image load. 
* @param {String} url 
* @returns {Promise} 
*/ 
function testImageUrl(url) { 
    return new Promise(function(resolve, reject) { 
    var image = new Image(); 
    image.addEventListener('load', resolve); 
    image.addEventListener('error', reject); 
    image.src = url; 
    }); 
} 

return testImageUrl(imageUrl).then(function imageLoaded(e) { 
    return imageUrl; 
}) 
.catch(function imageFailed(e) { 
    return defaultImageUrl; 
}); 

Answer 6

questo:

<img onerror="this.src='/images/image.png'" src="...">