当前位置:首页 » 代码教程 » 处理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
温馨提示:如果您对本文有疑问,请在本页留言即可!!!
觉得很赞 (4)付款方式
X
付款方式:
  • 微信
  • 支付宝
  • QQ红包

使用微信扫一扫
blogger
    发布日期:2019-05-13   所属类别:代码教程   浏览:11713次   评论:5次
    本文地址:https://www.shuyong.net/chengxu/1089.html [ 百度已收录 ]
    声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!

留言/评论:◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

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

昵称

邮箱

网址

5楼、导热油锅炉 [回复该留言]
2019-06-05 15:11
怪不得一直卡死,已经修改了,跪谢啊。
4楼、自闭症干预 [回复该留言]
2019-06-05 10:37
感谢分享,帮忙解决问题了。
3楼、综合布线系统 [回复该留言]
2019-06-03 14:19
代码里面不加绒onerror事件
2楼、心灵博客 [回复该留言]
2019-05-26 17:34
能在代码里面不加绒onerror事件就好了。
1楼、知识共享网 [回复该留言]
2019-05-25 15:13
谢谢分享

个人资料

舍力

博主:舍力

Emlog交流群

    用心做好每一件事!!!

博客统计

  • 文章数量:1132篇
  • 文章评论:3510条
  • 总访问量:9474889次
  • 微语数量:81条
  • 在线人数:1人
  • 本站运行:10年7月26天
  • 估计博主很忙,已经很久没更新了!
Q2 虚位以待
Copyright © 2024 舍力博客 版权所有   粤ICP备11021420号
基于宝塔面板,数据存储于阿里云ECS
Powered by emlog / &Author 舍力博客.