当前位置:首页 » 代码教程 » 处理img标签加载图片失败,显示默认图片简单代码分享

处理img标签加载图片失败,显示默认图片简单代码分享

常规方法解决我们都知道,img标签支持onerror事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。
例如这样使用:
<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">
当图片不存在时,将触发 onerror,而onerror 中又为img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png,图片不存在将显示 logoError.png。

但是,注意哦,这里有个大坑哦,如果logoError.png 也不存在,则会继续触发 onerror,导致死循环,页面卡死。而且,就算图片存在,但网络很不通畅,也可能触发 onerror。

当然,解决办法是有的,代码如下:
<img src="images/logo.png" onerror="slnotimg();"/>
<script type="text/javascript">
function slnotimg() {
var img = event.srcElement;
img.src = "images/logoError.png";
img.onerror = null; //解绑onerror事件
}
</script>
End
觉得很赞 (2)付款方式
X
付款方式:
  • 微信
  • 支付宝
  • QQ红包

使用微信扫一扫
温馨提示:如果您对本文有疑问,请在本页留言即可,其他途径暂不回复!!!
blogger
    本页正文内容约590个文字
    本文地址:http://www.shuyong.net/chengxu/1089.html [ 百度已收录 ]
    短网址: [复制短网址]
    声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
  • 上一篇:没有了
  • 下一篇:
  • 留言/评论:◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    填写好QQ号码,任点空白处自动获取

    昵称

    邮箱

    网址

    个人资料

    舍力

    博主:舍力

    Emlog交流群

      网站制作
      1、博客网站以Emlog为程序;
      2、企业网站建议以米拓MetInfo为程序,当然也可以用Emlog来做。

    博客统计

    • 文章数量:1080篇
    • 文章评论:3269条
    • 总访问量:4272063次
    • 微语数量:50条
    • 在线人数:1人
    • 本站运行:5年8月26天
    • 博主连续3天都没有更新文章了!
    Q2 虚位以待
    Copyright © 2019 舍力博客 版权所有   粤ICP备11021420号
    基于宝塔面板,数据存储于阿里云ECS
    Powered by emlog / &Author 舍力博客.