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

Is it possible to catch failed IMG loads when the server sends HTML instead of image data?

本文关键字：有可能 是否 失败 加载 IMG HTML 服务器 数据 图像      更新时间：2023-09-26

我有一个网站，链接到其他网站上不同的图像。有时这些图像已被删除或域名不再有效，等等。为了不显示这些图像并删除它们，我使用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?

你的问题和这个很相似:

jQuery/JavaScript替换破碎图像

比起使用jQuery并尝试附加一个事件，我发现这样编写<img...>元素是最可靠的:

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

我不知道jQuery是如何分配onerror的，但是当MIME类型不匹配时，我成功地获得/处理了一个错误。

JSFiddle例子。

如果您仍然不能让它工作，我的下一个建议是发送一个AJAX请求并尝试检索MIME类型。我很确定，如果你是热链接，它不会工作，虽然。

你可以这样做:

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"));
相关文章：