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

　　事情是这样的…在做一个内嵌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属性，提示用户丢失的图片内容…

　　

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

 

版权声明：本文为chenwenhao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/chenwenhao/p/9511866.html