杨二

Machine repeats, Human creates

绑定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'; });