为何这段HTML代码导致页面持续加载？如何解决？

当<input type="image">加载完Loading.bmp后，会触发onload事件，执行this.src='done.bmp'修改图片源。此时浏览器会重新加载done.bmp，加载完成后又会再次触发onload事件，再次执行修改src的代码，形成无限循环，导致页面一直处于加载状态。

方法1：修改src前移除onload事件 #

在onload函数内先取消自身的事件绑定，避免重复触发：

<input type="image" onload="this.onload=null; this.src='done.bmp'" src="Loading.bmp">

第一次加载完Loading.bmp后，会先移除onload事件，再加载done.bmp，后续不会再触发循环。

方法2：使用一次性事件监听（推荐） #

通过JavaScript添加带一次性执行属性的事件监听器，从根源避免循环：

<input type="image" id="loadBtn" src="Loading.bmp">
<script>
const loadBtn = document.getElementById('loadBtn');
loadBtn.addEventListener('load', function() {
  this.src = 'done.bmp';
}, { once: true });
</script>

{ once: true }参数会让事件监听器执行一次后自动移除，不会重复触发。

方法3：改用普通img元素（纯展示场景） #

如果不需要<input type="image">的表单提交功能，直接用<img>标签实现状态切换：

<img src="Loading.bmp" onload="this.onload=null; this.src='done.bmp'">

逻辑和方法1一致，更适合仅展示加载状态的场景。

内容的提问来源于stack exchange，提问作者John