[转]js判断图片是否存在，不存在则显示默认图片 onerror事件

最新推荐文章于 2024-04-23 12:49:36 发布

转载最新推荐文章于 2024-04-23 12:49:36 发布 · 125 阅读

文章标签：

#javascript #ViewUI

本文讨论了网页图片加载异常的问题，包括图片不存在、网络不通畅等情况导致的onerror事件频繁触发，提出通过使用小尺寸的默认图片、设置onerror函数限制执行次数等方法来优化图片加载体验，确保网站的正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自: http://hi.baidu.com/zdz8207/blog/item/358885180de9d6bd4bedbc4a.html

或者<img width="90" height="120" src="../images/avatars/default.jpg"onerror="this.src='../images/avatars/default.jpg'" border="0"/>

当图片不存在时，将触发onerror，onerror 中img为指定的默认图片。
图片存在则显示正常图片，图片不存在将显示默认。但如果默认图片也不存在，则继续触发 onerror，导致循环，出现错误。
如果图片存在，但网络很不通畅，也可能触发 onerror。

所以要确保 onerror 中的图片足够小，并且存在。

另外一种防止死循环的方式是调用一个方法，只执行一次onerror，代码如下：

function imgOnerror(img){
img.src="../images/avatars/default.jpg";
img.onerror=null;//控制不要一直跳动
}
<img width="90" height="120" src="../images/avatars/default.jpg" onerror="imgOnerror(this)" border="0"/>