Question

我有一个网站链接到其他网站上的不同图像。有时这些图像已被删除或域不再存在，等等。为了不显示这些图像并删除它们而我使用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不会抛出错误，但控制台显示“资源解释为图像，但使用MIME类型text / html传输：”

有没有办法用jQuery捕获它？

Answer 1

您的问题与此问题非常相似：

jQuery/JavaScript to replace broken images

我没有使用jQuery并尝试附加事件，而是发现以这种方式编写<img...>元素最可靠：

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

Answer 2

我不知道jQuery如何分配onerror，但我在MIME类型不匹配时成功获取/处理错误。

JSFiddle example

如果仍然无法使其工作，我的下一个建议是发送一个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"));

当服务器发送HTML而不是图像数据时，是否可以捕获失败的IMG加载？

2 个答案: