绑定image错误事件的正确姿势

问题

经常遇到图片加载不上的问题，一般解决这个问题的方式就是给image绑定error事件，当图片加载出错，触发该事件，然后给image重新指定一个通用图片：

解决

<img src="image.png" onerror="imgError(this);"/>
<script>
function imgError(image) {
    image.onerror = "";
    image.src = "/images/error.gif";
    return true;
}
</script>

更简短的方式：

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

有个地方值得注意：当触发错误事件时，首先要做的就是清楚错误事件image.onerror = "";，否则万一后面重新指定图片时，依然报错，就会陷入死循环，直接stack overflow了。

更好的方式（jQuery）

以上方式虽然精简，但并不提倡将绑定事件混合在HTML结构中，所以我们用jQuery重新实现一下：

$("img").error(function () {
  $(this).off("error").attr("src", "/images/error.gif");
});

jQuery还有个API：.one，也就是给元素绑定只触发一次的事件，非常适合干这事儿：

$('img').one('error', function() { this.src = '/images/error.gif'; });