JavaScript:失败的图像请求是否有错误属性？

Question

HTML <img>元素具有布尔complete属性,true如果图像已成功加载(或者尚未分配图像src).它还有一个onload事件,它在图像成功加载时触发,还有一个onerror事件,当图像无法加载时触发(例如由于链接断开,图像损坏或离线网络).

现在......我想知道的是,图像元素上是否有属性表示图像已经无法加载.假设我无法使用该onerror事件,因为脚本可能只有在事件触发后才能访问图像.我们正在寻找的是一个简单的布尔查找属性,如complete"已经尝试加载此图像,并且失败".(我在规范中没有看到,但我想知道我是否遗漏了什么).

Answer 1

您可以在几乎所有浏览器中使用naturalWidthandnaturalHeight来获得类似的效果（IE8及以下版本不支持此属性）。这些naturalXX属性包含通过 HTML/CSS 属性/样式进行修改之前图像的原始高度/宽度。因此，如果naturalWidth == 0，您就知道图像加载失败。

（请注意，您不能使用标准width或height属性，因为它们将返回未找到的占位符图像的大小。）

document.getElementById("image").naturalWidth ? "success" : "fail"

如果您只是想更改未找到的占位符图像，有一个漂亮的 HTML 解决方案：

<object data="https://stackoverflow.com/does-not-exist.png">
  <img src="https://stackoverflow.com/content/img/so/logo.png">
</object>

小提琴： http: //jsfiddle.net/K3dwX/1/

PS： IE6+的潜在解决方案