Можно ли поймать неудачные IMG-нагрузки, когда сервер отправляет HTML вместо данных изображения?

У меня есть веб-сайт, который ссылается на разные изображения на других сайтах. Иногда эти изображения удалены или домены больше не живут и т.д. Чтобы не показывать эти изображения и удалять их, я использую jQuery для этого:

 // catch image load errors
$( "img" ).error(function() { 

 // read out image source:
 var src = $(this).attr('src');

// post the source to the server for the image to be removed    
 $.post("/pajax/image/notLoaded/", {url:src},
    function success(obj) {

       if(obj.status =='ok'){
            console.log('removed: '+src);
        }

      },
   "json" );

 // hide the image & its container div
    $( this ).hide();
    $( this ).closest(".item-img").hide();

Это отлично подходит для изображений, которые больше не живут и данные не отправляются. Однако достаточно часто отправляется HTML-страница, и в этом случае jQuery не выдает ошибку, но на консоли отображается "Resource интерпретируется как изображение, но передается с типом MIME text/html:"

Есть ли способ поймать это с помощью jQuery?

Ответы

Ответ 1

Я не знаю, как jQuery назначает onerror, но я успешно получаю/обрабатываю ошибку, когда тип MIME не соответствует.

Пример JSFiddle.

Если вы все еще не можете заставить его работать, мое следующее предложение - отправить запрос AJAX и попытаться получить MIME-тип. Я уверен, что это не сработает, если вы hotlinking.

Вы можете сделать что-то вроде:

var url = document.getElementsByTagName('img')[0].src
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send(null);

console.log(xhr.getAllResponseHeaders());
//or
console.log(xhr.getResponseHeader("content-type"));

Ответ 2

Ваш вопрос очень похож на этот:

jQuery/JavaScript для замены неработающих изображений

Вместо того, чтобы использовать jQuery и пытаться подключить событие, я нашел его наиболее надежным для записи элемента <img...> следующим образом:

<img src="image.png" onerror="this.style.display='none';"/>