您现在的位置是:网站首页> 内容页

判断img图片是否加载成功

  • 大红鹰手机游戏网址
  • 2019-04-26
  • 469人已阅读
简介  上班之余,记录一下工作中遇到的有趣问题...  事情是这样的...在做一个内嵌H5的app时,有一个“个人名片”页面...要求:如果后台接口有给头像的图片链接就用他们给的,如果没给

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

  事情是这样的...在做一个内嵌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

 

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

 

文章评论

Top