Wykrywanie, kiedy obraz nie może się załadować w JavaScript

Question

Czy istnieje sposób na sprawdzenie, czy ścieżka obrazu prowadzi do rzeczywistego obrazu, tj. Wykrywanie, kiedy obraz nie jest ładowany w JavaScript.

Dla aplikacji internetowej parsuję plik xml i dynamicznie tworzę obrazy HTML z listy ścieżek obrazów. Niektóre ścieżki obrazu mogą już nie istnieć na serwerze, więc chcę z powodzeniem zakończyć się niepowodzeniem, wykrywając, które obrazy się nie ładują i usuwając element HTML img.

Uwaga: Rozwiązania JQuery nie będą mogły być używane (szef nie chce używać JQuery, tak, wiem, nie zaczynaj mnie). Znam sposób w JQuery, aby wykryć, kiedy obraz jest załadowany, ale nie, czy się nie udało.

Mój kod do tworzenia elementów IMG, ale jak wykryć, czy ścieżka img prowadzi do nieudanego załadowania obrazu?

Answer 1

Możesz spróbować następującego kodu. Nie mogę jednak ręczyć za zgodność przeglądarki, więc musisz to przetestować.

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"); 

I moje sympatie dla szefa odpornego na jQuery!

Answer 2

Oto funkcja, którą napisałem dla innej odpowiedzi: Javascript Image Url Verify. Nie wiem, czy jest to dokładnie to, czego potrzebujesz, ale używa różnych technik, których używałbyś, obejmujących procedury obsługi dla onload, onerror, i ogólnego limitu czasu.

Ponieważ ładowanie obrazu jest asynchroniczne, wywołuje się tę funkcję wraz z obrazem, a następnie wywołuje ona połączenie zwrotne w późniejszym czasie z wynikiem.

Answer 3

tak jak poniżej:

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

if (!img.complete) { 

//has picture 
} 
else //not{ 

} 

Answer 4

Odpowiedź jest ładny, ale wprowadza jeden problem. Za każdym razem, gdy bezpośrednio przypisujesz onload lub onerror, może on zastąpić wywołanie zwrotne, które zostało wcześniej przypisane. Dlatego istnieje niezła metoda, która "rejestruje określonego detektora w EventTarget, który jest wywoływany na", jak mówią na MDN. Możesz zarejestrować tylu słuchaczy, ile chcesz na tym samym wydarzeniu.

Pozwól, że trochę poprawię odpowiedź.

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"); 

Ponieważ zewnętrzny proces ładowania zasobów jest asynchroniczny, byłoby jeszcze ładniejszy w użyciu nowoczesnego JavaScript obietnicami, jak poniżej.

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

to:

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