HTML <img>
元素有一个布尔complete
属性,如果图像已成功加载(或尚未分配src
),则该属性为true
。它还有一个onload
事件,当映像成功加载时激发;还有一个onerror
事件,当图像加载失败时激发(例如,由于链接断开、映像损坏或网络脱机)。
现在。。。我想知道的是,图像元素上是否存在属性,该属性表示图像已经加载失败。假设我不能使用onerror
事件,因为脚本可能只有在事件触发后才能访问映像。我们正在寻找的是一个简单的布尔查找属性,如complete
,它表示"已经尝试加载此图像,但失败了"。(我在规格中没有看到,但我想知道我是否遗漏了什么)。
您可以在几乎所有浏览器中使用naturalWidth
和naturalHeight
来获得类似的效果(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+的潜在解决方案