热门标签

, ,

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

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

<img src="image/logo.png" onerror="javascript:this.src='imags/error.png';">

当图片不存在时,将触发 onerror,而onerror 中又为img 指定一个error.png 图片。也就是说图片存在则显示logo.png,图片不存在将显示 error.png。

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

当然,解决办法是有的,代码如下:

<img src="image/logo.png" onerror="slnotimg();"/>
<script type="text/javascript">
function slnotimg() {
var img = event.srcElement;
img.src = "image/error.png";
img.onerror = null; //解绑onerror事件
}
</script>

未经允许不得转载:作者:諦覠, 转载或复制请以 超链接形式 并注明出处 吾爱博客
原文地址:《处理img标签加载图片失败时显示默认图片》 发布于2019-06-25

分享到:
赞(0) 打赏

评论 抢沙发

1 + 7 =


处理img标签加载图片失败时显示默认图片

长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏

諦覠
欢迎来到吾爱博客~
切换注册

登录

忘记密码 ?

切换登录

注册