JQuery для проверки изображения существует, если глава 404, чем скрыть его

Используя php, вы получите 100 фотографий url из db и покажите их на странице, но некоторые фотографии больше не могут существовать. Если сбой фотопамяти (404), я хочу использовать jquery, чтобы скрыть изображение и не хочу показывать изображение с ошибкой. Это мой код, но он не работает.

HTML

<div id=test>
    <img src="http://test.com/test1.jpg" />
    <img src=" http://test.com/test2.jpg" />
    <img src="http://test.com/test3.jpg" />
</div>

JQuery

var pic_list = jQuery("#test img");

pic_list.load(function () {
    var http = new XMLHttpRequest();
    http.open('HEAD', pic_list, false);
    http.send();
    if (http.status == 404) {
        pic_list.hide();
    } else {
        pic_list.show();
    }
});

Ответы

Ответ 1

Отправка кратных запросов ajax не требуется, если вы можете использовать событие onerror.

Отметьте связанный jQuery/Javascript, чтобы заменить поврежденные изображения.

Адаптация к вашим потребностям:

HTML:

<img src="someimage.png" onerror="imgError(this);" />

JS:

function imgError(image){
    image.style.display = 'none';
}

Fiddle

Или с помощью jQuery:

function imgError(image){
    $(image).hide();
}

Я обычно не использовал встроенный JS в HTML и даже рассматривал использование .error обработчик:

$('#test img').error(function() {
    $(this).hide();
});

Но приведенное выше не будет работать, если привязка обработчика выполняется после возникновения события ошибки, поэтому я предлагаю первое решение.

Ответ 2

Второй параметр метода open - это URL-адрес, а не массив элементов HTML.

Итак, вы можете использовать each для итерации по элементам, получить их атрибут src, используя .attr() и передать это в метод.

Поскольку у вас уже загружены изображения, вместо того, чтобы делать другой запрос для каждого из них, вы можете использовать метод, который я обсуждал в другом вопросе: Проверить, блокирует ли пользователь 3-й стороннего домена

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