判断img图片是否加载成功

　　上班之余，记录一下工作中遇到的有趣问题...

　　事情是这样的...在做一个内嵌H5的app时，有一个“个人名片”页面...要求：如果后台接口有给头像的图片链接就用他们给的，如果没给，前端给个默认头像...测试过程中发现，接口的图片链接有可能是无效的，就像这样一个链接http://www.test.com/wuxiao.png...我们当时的做法是判断avaterUrl（头像链接字段）是否存在，存在的情况下并不知道这张图片是否有效...如果是无效图片链接显示出来的是，很明显这样很糟糕...

　　ios开发人员说：我们可以知道这张图片是否加载失败，失败的话我们就替换成其他图片...

　　当时我就想：前端能不能判断图片是否加载成功呢？于是就开始去了解img的加载...（博文只给我目前掌握的最推荐的做法，一些不靠谱的不讨论...）

 

　　判断img是否加载成功需要用到2个事件：onload和onerror...但是什么时候将图片绑定事件呢？window.onload之后肯定不行，因为window.onload执行时图片已加载完毕...而jquery的ready方法也行不通，因为可能img加载图片失败时，img并没有绑定error事件，就会导致不能替换无效的图片...有人可能会想到事件委托，但是这2个事件是不支持事件委托的...但是，换个思路，全局绑定load或error事件，然后判断事件对象是否为img，只对img做操作...

 

1、加载成功

// 图片加载成功时触发load事件，失败不会触发
document.addEventListener("load", function (event) {
  var ev = event ? event : window.event;
  var elem = ev.target;

  if (elem.tagName.toLowerCase() == 'img') {  
    //  图片加载成功
    //  do something...
  }
}, true);

 

2、加载失败

// 图片加载成功时触发error事件，成功不会触发
document.addEventListener("error", function (event) {
  var ev = event ? event : window.event;
  var elem = ev.target;

  if (elem.tagName.toLowerCase() == 'img') { 
    // 图片加载失败  --替换为默认 
    elem.src = "../img/default.jpg";
  }
}, true);

　　看似很完美的替换，But，如果你的默认图片加载也失败的话...所以还是要写好alt属性，提示用户丢失的图片内容...

 　　

　　 参考链接：https://www.jb51.net/article/129321.htm

 

 　  关于图片加载是否成功了讨论告一段落...如有好的方案，欢迎留言评论...