强仔
@qiangzai

常规方法解决我们都知道,img标签支持onerror事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。

例如这样使用:

<img src="img01" onerror="javascript:this.src='img02';">

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

解决方法

<img src="img01" onerror="slnotimg();"/><script type="text/javascript">function slnotimg() {var img = event.srcElement;img.src = "img02";img.onerror = null;}</script>

代码测试

测试图

  • 测试图存在,测试图正常显示
  • 测试图不存在,自动替换显示加载图

结语

感谢访问强仔博客,希望本文对你有所帮助!

本文文章字数为:181个

您阅读这篇文章共花了:

文章最后更新于:2020 年 10 月 31 日 14:22:31

当前IP为:54.85.57.0,请自觉遵守网络安全

END
上午8:26 · 2020年10月31日
138
0
3
宝贝留个言吧

教程
处理img标签加载图片失败,显示默认图片简单代码分享
常规方法解决我们都知道,img标签支持onerror事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提...
欢迎扫描二维码继续阅读
October 31, 2020
强仔博客
blogger
强仔
其他站点

统计
文章:107 篇
分类:4 个
评论:327 条
加载耗时:22 ms
运行时长:1年149天
by yoniu.
强仔博客