上班之余, 记录一下工作中遇到的有趣问题...
事情是这样的... 在做一个内嵌 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.cnblogs.com/chenwenhao/p/9511866.html