Wykryj, kiedy obraz nie ładuje się w JavaScript

Czy istnieje sposób na określenie, czy ścieżka obrazu prowadzi do rzeczywistego obrazu, tj. Wykrywa, kiedy obraz nie ładuje się w JavaScript.

W przypadku aplikacji sieci Web analizuję plik xml i dynamicznie tworzę obrazy HTML z listy ścieżek obrazów. Niektóre ścieżki obrazów mogą już nie istnieć na serwerze, więc chcę z wdziękiem zawieść, wykrywając, które obrazy nie mogą się załadować i usuwając ten 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). Znam sposób w JQuery na wykrycie, kiedy obraz jest ładowany, ale nie wiem, czy się nie powiodło.

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

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

Możesz wypróbować następujący kod. 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 współczucie dla szefa odpornego na jQuery!

Odpowiedź jest ładna, ale wprowadza jeden problem. Zawsze, gdy przypisujesz onloadlub onerrorbezpośrednio, może to zastąpić wywołanie zwrotne, które zostało przypisane wcześniej. Dlatego istnieje fajna metoda, która „rejestruje określony odbiornik w EventTarget, do którego jest wywoływany”, jak to mówią w MDN . Możesz zarejestrować dowolną liczbę słuchaczy na to samo wydarzenie.

Przepiszę trochę 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ż proces ładowania zasobów zewnętrznych jest asynchroniczny, byłoby jeszcze przyjemniej używać nowoczesnego JavaScript z obietnicami, takimi jak poniższe.

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');
    }

);

To:

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

/**
 * 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;
});

jQuery + CSS dla img

Z jQuery działa to dla mnie:

$('img').error(function() {
    $(this).attr('src', '/no-img.png').addClass('no-img');
});

I mogę używać tego obrazu wszędzie w mojej witrynie, niezależnie od jej rozmiaru, z następującą właściwością CSS3:

img.no-img {
    object-fit: cover;
    object-position: 50% 50%;
}

WSKAZÓWKA 1: użyj kwadratowego obrazu o wymiarach co najmniej 800 x 800 pikseli.

WSKAZÓWKA 2: do portretu ludzi , użyjobject-position: 20% 50%;

CSS tylko dla background-img

W przypadku brakujących obrazów tła na każdej background-imagedeklaracji dodałem również następujące informacje :

background-image: url('path-to-image.png'), url('no-img.png');

UWAGA: nie działa dla przezroczystych obrazów.

Strona serwera Apache

Innym rozwiązaniem jest wykrycie brakującego obrazu za pomocą Apache przed wysłaniem go do przeglądarki i zastąpienie go domyślną zawartością no-img.png.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]

Oto funkcja, którą napisałem dla innej odpowiedzi: Javascript Image Url Verify . I nie wiem, czy to jest dokładnie to, co trzeba, ale używa różnych technik, które byłoby użyć które obejmują teleskopowe dla onload, onerror,onabort oraz ogólny limit czasu.

Ponieważ ładowanie obrazu jest asynchroniczne, wywołujesz tę funkcję ze swoim obrazem, a następnie wywołuje wywołanie zwrotne później z wynikiem.

tak jak poniżej:

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

if (!img.complete) {

//has picture
}
else //not{ 

}