JavaScript 中 img onerror 事件导致死循环的排查与解决

onerror 死循环问题分析

经过代码审查，发现网页中存在如下结构：

<img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" />

关键在于 onerror 属性。当原始图片加载失败时，该事件会被触发，并尝试将 src 指向 '/noPic.gif'。若此备用图片同样不存在，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>