小墨の博客

梦想需要付诸行动,否则只能是梦

【HTML】判断img图片是否加载成功

  事情是这样的...在做一个内嵌H5的app时,有一个“个人名片”页面...要求:如果后台接口有给头像的图片链接就用他们给的,如果没给,前端给个默认头像...测试过程中发现,接口的图片链接有可能是无效的,就像这样一个链接http://www.xxxx.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,有修改。

张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:512
    • 页面总数:20
    • 分类总数:92
    • 标签总数:208
    • 评论总数:62
    • 浏览总数:235404

    | | |
    | |  Z-Blog PHP