img图片加载失败的处理方法 - 缥缈博客-个人技术博客

img图片加载失败的处理方法

作者: 缥缈     发布于「 技术教程 」 - 缥缈博客-个人技术博客

2019-6-13 分类: 技术教程 评论(0)
当前位置:首页 > 技术教程 > 正文

作者: 缥缈

个人技术博客

手机扫码查看

标签:

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

常规方法解决我们都知道,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>
当图片不存在时,将触发 onerror,而onerror 中又为img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png,图片不存在将显示 logoError.png。

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

当然,解决办法是有的,代码如下:
原文地址:http://www.shuyong.net/chengxu/1089.html
当图片不存在时,将触发 onerror,而onerror 中又为img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png,图片不存在将显示 logoError.png。

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

当然,解决办法是有的,代码如下:
原文地址:http://www.shuyong.net/chengxu/1089.html
本文最后更新于2019-6-13,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
未经允许不得转载:

作者: 缥缈, 转载或复制请以 超链接形式 并注明出处 缥缈博客-个人技术博客
原文地址: 《img图片加载失败的处理方法》 发布于2019-6-13

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏