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

2019-5-12 / 5 评论 / 13600 阅读

常规方法解决我们都知道,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>
    1. 头像
      导热油锅炉
      第5楼
      怪不得一直卡死,已经修改了,跪谢啊。
      回复
    1. 头像
      自闭症干预
      第4楼
      感谢分享,帮忙解决问题了。
      回复
    1. 头像
      综合布线系统
      地板
      代码里面不加绒onerror事件
      回复
    1. 头像
      心灵博客
      板凳
      能在代码里面不加绒onerror事件就好了。
      回复
    1. 头像
      知识共享网
      沙发
      谢谢分享
      回复