图片加载错误的处理 img.onerror

标签：loading   服务器   error   图片   标签   

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

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

绑定方式如下：

In HTML:

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

In JavaScript:

img.onerror = handler;

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

img.attachEvent ("onerror", handler);

图片加载错误的处理 img.onerror

标签：loading   服务器   error   图片   标签   

原文地址：http://jyb2014.blog.51cto.com/9155315/1562563