js注意img图片的onerror事件的分析

最新推荐文章于 2025-03-28 20:47:51 发布

转载最新推荐文章于 2025-03-28 20:47:51 发布 · 3.6k 阅读

前端知识专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在网页开发中遇到的Stackoverflow错误，特别是与img图片的onerror事件相关的细节。通过分析一个具体的代码实例，阐述了如何避免无限循环错误，并提供了两种解决方案。包括一种使用自定义函数来控制onerror事件的行为，以及如何确保备用图片的存在。

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

打开网页时提示 Stack overflow at line: 0。img图片的onerror事件需要注意的细节。

经过分析，发现网页中存在类似如下的代码：

<img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" />
分析：特别注意 onerror，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic.gif，图片不存在将显示 noPic.gif。但问题来了，如果 noPic.gif 也不存在，则继续触发 onerror，导致循环，故出现错误。

说明：如果图片存在，但网络很不通畅，也可能触发 onerror。

解决方法：

第一种：：.去掉 onerror 代码；或者更改 onerror 代码为其它；或者确保 onerror 中的图片足够小，并且存在。

第二种：
复制代码代码如下:

<script type="text/javascript">
<!–
function nofind(){
var img=event.srcElement;
img.src="../../../sys/common/image/fileoperation/icon/default.gif";
img.onerror=null; 控制不要一直跳动
}
//–>
</script>
<td align="center"><img src="../../../sys/common/image/fileoperation/icon/${file.suffix }.gif" onerror="nofind();" />${file.name }</td>