Обнаруживать, когда изображение не загружается в Javascript

Есть ли способ определить, приводит ли путь изображения к реальному изображению, т.е. обнаруживает, когда изображение не загружается в Javascript.

Для веб-приложения я разбираю XML файл и динамически создаю HTML-изображения из списка путей изображения. Некоторые пути изображения могут больше не существовать на сервере, поэтому я хочу с ошибкой изящно определить, какие изображения не загружаются и не удаляются этот элемент HTML img.

Примечание. Решения JQuery не смогут использоваться (босс не хочет использовать JQuery, да, я знаю, не запустил меня). Я знаю, как в JQuery обнаружить, когда загружается изображение, но не сработало ли оно.

Мой код для создания элементов img, но как я могу определить, приводит ли путь img к ошибке загрузки изображения?

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

Ответ 1

Вы можете попробовать следующий код. Я не могу ручаться за совместимость с браузером, поэтому вам придется протестировать это.

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

И мои симпатии к боссу, устойчивому к jQuery!

Ответ 2

Ответ хороший, но он вводит одну проблему. Всякий раз, когда вы напрямую назначаете onload или onerror, он может заменить обратный вызов, который был назначен ранее. Вот почему есть хороший метод, который "регистрирует указанный прослушиватель на EventTarget, который он вызывал", как говорится в MDN. Вы можете зарегистрировать столько слушателей, сколько хотите, на одном и том же мероприятии.

Позвольте мне немного переписать ответ.

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

Поскольку процесс загрузки внешних ресурсов асинхронен, было бы еще лучше использовать современный JavaScript с promises, например, следующим.

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

);

Ответ 3

Здесь функция, которую я написал для другого ответа: Javascript Image Url Verify. Я не знаю, нужно ли это именно то, что вам нужно, но оно использует различные методы, которые вы будете использовать, включая обработчики для onload, onerror, onabort и общий тайм-аут.

Поскольку загрузка изображения асинхронна, вы вызываете эту функцию с вашим изображением, а затем вызываете ваш обратный вызов через некоторое время с результатом.

Ответ 4

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

Ответ 5

как показано ниже:

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

if (!img.complete) {

//has picture
}
else //not{ 

}