注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

阿飘的博客

十里平湖霜满天 寸寸青丝愁华年

 
 
 

日志

 
 

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

2012-10-30 18:50:25|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
      在显示用户头像时,我们常常采用先加载后显示的策略,即在加载过程中显示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);

原作者:微米博客

  评论这张
 
阅读(1240)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017