处理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>

 


公告:快来抢广告位吧! 联系q:3533464073
© 版权声明

文章版权声明

1、本网站名称:安鹿轩

2、本站永久网址:www.anlu1314.com

3.安鹿轩(下文简称本站)提供的所有内容仅供学习、交流和分享用途,只供参考。

4.本站资源禁止并谢绝未经本站许可的使用,如若欲转载,请署名以及注明出处,请务必以文字链接的形式标明或保留文章原始出处和作者的信息。

5.本站(原创)文章、资源、图片等所有内容,一经转载,即表示您已经接受上述声明!需自行承担一切风险与责任!

6.关于本站的所有留言评论与转载、引用文纯属文字原作者个人观点,与本站观点及立场无关!

7.如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

8.有任何侵权问题请联系E-mail [email protected]

THE END
感谢支持啦!୧( ⁼̴̶̤̀ω⁼̴̶̤́ )૭
点赞1 分享
让我来说两句( ˃̶̤́ ꒳ ˂̶̤̀ ) 抢沙发
头像
来来来,畅所欲言吧༼。^・ェ・^。༽
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容