强仔博客

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

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

例如这样使用:

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

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

解决方法

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

代码测试

结语

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

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »