img的onerror事件

最新推荐文章于 2026-05-17 06:27:16 发布

原创最新推荐文章于 2026-05-17 06:27:16 发布 · 6.6k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Web

当前文章被收录于：

Web

48 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文针对图片加载失败导致用户体验差的问题，提供了多种解决方法，包括设置默认背景图、利用onerror事件控制、通过JavaScript函数避免无限循环等，并确保浏览器兼容。

1.在图片不存在或者网络状态不好的情况下，会存在图片加载不过来，用户体验很差：

2.解决方法：

(1)统一设置一个背景图

img{
	display: block;
	width: 100px;
	height:100px;
	background: url(https://blog.csdn.net/'images/Wechat.png') no-repeat 0 0;	
	background-size: 100% 100%;	    
	margin: 40px auto 0;
}

(2)直接在img标签里添加onerror事件进行控制

<img src="" onerror="javascript:this.src='xxx.jpg';">

注意点：

①这里的图片要尽可能小，如果过大还会存在加载失败的可能；

②当'xxx.jpg'图片不存在时还会出现加载失败；

②当加载失败时会再次执行onerror，再失败再执行，会一直执行陷入循环之中。

(3)可以写一个函数，让函数只执行一次（执行一次把它置为null即可），不让其进入循环之中（推荐使用）

<img src="" onerror="noImg();"/>

<script type="text/javascript">
	function noImg(event){ 
		var img=img=event.srcElement ? event.srcElement : event.target; 
		img.src="images/Wechat.png"; 
		img.onerror=null; 
	} 
</script>

此法甚好！

(4)onerror相当于用js事件控制,所以在各个浏览器都能兼容

3.效果