Question

我正在运行一个动态加载图像的脚本，具体取决于几个标准。脚本事先不知道特定图像源是否实际存在，因此需要在显示图像之前进行检查。我通过使用试图优雅处理事件的函数替换元素上的onerror处理程序来完成此操作。

乍一看这很有效，但即使我已经更换了事件，浏览器仍会在控制台中审核404错误，我不想要。更糟糕的是，IE在状态栏中显示臭名昭着的JS错误图标，我觉得相当尴尬。

我试图在JSFiddle中总结问题。

var img = new Image();
img.onerror = function (ev) {
    alert("This does not exist!");
    return true;
}
img.onload = function (ev) {
    document.body.appendChild(this);
}
img.src = "foo.png"; //Missing image

基本上，我想要禁止此元素的所有错误报告，以便控制台不会出现多余的错误输出。

我知道我可以通过使用AJAX和服务器端脚本预取和评估HTTP头来解决这个问题，虽然这在技术上是一种可能的解决方案，但我更愿意避免这种情况。但是，虽然我在我的示例中仅使用标准JS，但JQuery代码也是可以接受的。

我已经尝试了阅读事件规范，但由于网页脚本仍然是令人困惑的ECMAScript，HTML DOM，客户端，pixy尘埃以及我们都喜欢讨厌的HTML5定义的混乱，它真的没有让我任何更聪明的人。我得到的最接近的是Mozilla's documentation（有趣的是，它甚至没有说明正确的函数参数），这表明让事件返回true会抑制错误，但这并没有真正起作用。

Answer 1

我相信如果没有404错误，您无法检查图像链接是否已损坏/不存在。这实际上是关于链接的信息被打破。

你提到另一种方式是检查存在的ajax ......

function UrlExists(url) {
  var http = new XMLHttpRequest();
  http.open('HEAD', url, false);
  http.send();
  return http.status != 404;
}

UrlExists('img_url');

但你仍然可以在控制台获得404。

抑制HTMLImageElement onerror

1 个答案: