在显示用户头像时,我们常常采用先加载后显示的策略,即在加载过程中显示loading.gif,待头像加载完成后再显示出来。这样做很好的提升了用户体验。但与此同时,偶尔也会出现一些问题,比如图片加载错误(网络问题或者服务器上根本无该用户头像),这个时候如果换掉loading.gif就会显示出一张有裂痕的图标(表示图片未加载成功),而如果不换掉loading.gif则会一直显示loading,对用户来说体验很差同时也是一种误导。

为了处理这个问题,我们引入了onerror事件,这个事件是img标签独有的,在图片加载错误时触发。这样一来,我们就可以在图片加载错误时将loading.gif替换为默认的图片(比如系统为用户提供的默认头像)。

绑定方式如下:

In HTML:

<img οnerrοr="handler" src="http://leepiao.blog.163.com/blog/user.jpg" />

In JavaScript:

img.onerror = handler;

img.addEventListener ("error", handler, useCapture);

img.attachEvent ("onerror", handler);