`img`标签中的`onerror`事件是HTML中处理图像加载失败时的一种机制。当指定的图片源(`src`属性)无法成功加载,比如由于网络问题、图片不存在或者路径错误,`onerror`事件就会被触发。这个事件提供了一个在图片加载失败时执行自定义代码的机会。 在描述中提到的问题是,如果在`onerror`事件处理器中,我们简单地将图片源替换为另一个源,如`this.src='xxx.jpg'`,这可能导致一个无限循环。因为如果新的图片源同样无法加载,`onerror`事件会再次触发,进而再次尝试加载新图片,如此反复,浏览器,特别是基于微软核心的浏览器,如早期版本的Internet Explorer,可能会识别出这是一个潜在的死循环,并抛出“stack overflow”错误,即堆栈溢出。 为了避免这种情况,一种解决方案是使用两个`img`标签。第一个`img`标签用于尝试加载原始图片,并在`onerror`事件触发时将其设置为隐藏(`display: none;`)。同时,通过JavaScript改变第二个隐藏的`img`标签的类(`class`),使其变为可见。这样,即使第一个图片加载失败,第二个图片也会显示出来,而不会导致`onerror`事件的无限循环。 ```html <style type="text/css"> .hidden { display: none; } </style> <img src="xxx.jpg" onerror="this.className='hidden';xx.className=''" id="img1" /> <img src="yyy.jpg" class="hidden" id="img2" /> ``` 在这个例子中,`img1`是主图片,如果加载失败,`onerror`事件会让它隐藏,并显示`img2`。确保`img2`的源是可靠的,或者是一个备用的占位符图片,以防万一`img1`的替换策略也失败。 这种方法的一个关键点是,确保`onerror`事件处理函数不会再次触发`onerror`事件。通过改变CSS类而不是更改`src`属性,我们可以避免这个问题,因为更改CSS不会影响到图片的加载状态。 `onerror`事件是前端开发中处理图像加载异常的重要工具,但正确使用它需要考虑可能的错误处理场景,防止无限循环或不必要的错误状态。在处理`onerror`事件时,推荐的做法是提供备用图片、显示占位符或者给出错误提示,以保证用户体验的顺畅。
- 粉丝: 9
- 资源: 946
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Android 实现一个系统级的悬浮秒表
- 摇钱树指标,基于机构订单原理
- 【java毕业设计】足球赛会管理系统源码(ssm+jsp+mysql+说明文档+LW).zip
- 技术资料分享STM32F10xxCDE-Errata-CH-V5很好的技术资料.zip
- 技术资料分享STM32F10xx46-Errata-CH-V2很好的技术资料.zip
- 技术资料分享STM32F10xx8B-Errata-CH-V6很好的技术资料.zip
- 技术资料分享STM32F2技术培训-灵活的静态存储控制器-FSMC很好的技术资料.zip
- Mamba快速入门.pdf
- 【java毕业设计】宜佰丰超市进销存管理系统源码(ssm+jsp+mysql+说明文档+LW).zip
- 全开源免费AI网址导航网站源码 AigoTools