判断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

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