盘诚文摘好记性不如烂博客

img标签的onerror事件可能会引发循环异常


有时,我们希望这样:网页中引用的他站链接图片,若图片超时或不存在时,则转向加载本站内的某个图片以提示目标图片加载失败。如LOGO图片友情链接,当对方LOGO图片访问失败时,就加载本站的出错提示图片。实现以上功能,便用到img标签的onerror事件。我们常常写上如下代码:

< img src="http:/www.maximware.com/toplogo.gif” data-ke-onerror=" data-ke-src="http:/www.maximware.com/toplogo.gif” data-ke-onerror="”javascript:this.src=’/noPic.gif’;” alt="”pic”" />

也常常在某个时候,上面的写法会引发异常。打开网页时,偶尔会提示 Stack overflow at line: XXX。

仔细分析,发现问题的根源为:当LOGO图片不存在时,将触发 onerror事件,而 onerror 脚本又将img 的 src 属性重定向为 noPic.gif 图片。当 noPic.gif 也不存在或访问失败时,则继续触发 onerror事情导致循环错误,故引发异常。

解决方法:

第一种:.去掉 onerror 代码;或者更改 onerror 代码为其它;或者确保 onerror 中的图片足够小,并且存在。

第二种:

  1. < script type="text/javascript” >
  2. function nofind(){
  3. var img=event.srcElement;
  4. img.src=”/error.gif”;
  5. img.onerror=null;//控制不要一直跳动
  6. }
  7. < /script >
  8. < img src="http:/www.maximware.com/toplogo.gif” data-ke-onerror=" data-ke-src="http:/www.maximware.com/toplogo.gif” onerror="nofind();” />
转载:感谢您对盘诚格志博客网站的认可,以及对盘诚原创文章和文摘的青睐。若引用、转载或分享到个人网站或者朋友圈,请注明出处及作者信息,不甚感激!盘诚保留所有最终解释权。

扫一扫分享本页