已从DOM移除的图片节点仍触发onload事件，恳请澄清原因

示例代码 #

<img id="img" src="src/abc.jpg" onload="imgload()"/>
<script>
   var img = document.getElementById("img");
   img.remove()
   function imgload(){
      console.log("image loaded now")
   }
</script>

问题描述 #

即使我们已将该图片节点从DOM中移除，其绑定的onload事件监听器仍被触发。我知晓这是预期行为，但看起来类似bug，恳请予以澄清。

澄清说明 #

这确实是浏览器的预期行为，并非Bug，核心逻辑如下：

• 图片的加载流程和它是否存在于DOM中是独立的。一旦浏览器开始发起图片资源的请求，哪怕元素已经被从DOM里移除，只要资源加载完成，onload事件就会被触发。
• 你代码里的img.remove()只是移除了DOM节点，但此时浏览器可能已经启动了图片请求流程——移除操作不会中断正在进行的资源加载，所以当图片加载完成时，绑定的imgload函数依然会执行。

如果想避免这种情况，可以在移除节点前主动终止图片加载，比如设置img.src = ''，这样浏览器会停止当前的图片请求，后续就不会触发onload事件了。

内容的提问来源于stack exchange，提问作者MOHAMED SIKKANDAR AFZAL M