<img> 的 onload 事件属于异步资源加载回调，其触发依赖图像资源是否完成加载，与 DOM 节点是否仍在文档中无关；移除元素不会中断浏览器内部的资源加载流程，因此事件仍会正常执行。
`` 的 `onload` 事件属于异步资源加载回调，其触发依赖图像资源是否完成加载，与 dom 节点是否仍在文档中无关；移除元素不会中断浏览器内部的资源加载流程，因此事件仍会正常执行。
在 Web 开发中，一个常见但易被误解的现象是：即使通过 element.remove() 主动将 <img> 元素从 DOM 中移除，其绑定的 onload 事件仍可能被触发。例如以下代码：
<img id="img" src="src/abc.jpg" onload="imgload()" />
<script>
const img = document.getElementById("img");
img.remove(); // 立即移除节点
function imgload() {
console.log("image loaded now"); // ✅ 仍可能输出！
}
</script>这并非 Bug，而是符合规范的设计行为。根本原因在于：
✅ onload 是资源加载完成事件，由浏览器网络层（而非 DOM 层）驱动；
✅ 图像加载是异步过程，一旦请求发起（src 设置后），浏览器便开始下载资源；
✅ 即使 DOM 节点被移除，已发起的 HTTP 请求不会被自动取消，加载完成后仍会触发 onload 回调。
正确的清理方式：避免内存泄漏与逻辑错误
若需确保移除元素后不再响应加载事件，应主动解绑事件监听器或使用更可控的 API：
✅ 推荐方案：使用 addEventListener + 显式移除
const img = document.getElementById("img");
img.addEventListener("load", imgload);
img.remove();
function imgload() {
console.log("image loaded now");
// 注意：此时 img 已脱离 DOM，但事件仍可安全执行
}
// 若需彻底防止回调执行，可在 load 前移除监听器（需配合 Promise 或 abort）⚠️ 更健壮方案：结合 AbortController（现代浏览器）
const controller = new AbortController();
const signal = controller.signal;
// 模拟图像加载（实际中需配合 fetch + Blob URL，或使用 <img> 的 naturalWidth 判断）
const img = new Image();
img.src = "src/abc.jpg";
// 加载成功时处理
img.onload = () => {
if (!signal.aborted) {
console.log("image loaded successfully");
}
};
// 移除前中止逻辑（注意：原生 <img> 不支持 signal，此为示意；真实场景建议用 fetch + createObjectURL）
// 实际项目中，可封装加载逻辑并维护加载状态标志位✅ 实用防御模式：检查节点存在性
function imgload() {
// 确保元素仍在 DOM 中才执行业务逻辑
if (this.isConnected) {
console.log("image loaded and still in DOM");
// 执行 UI 更新、动画等依赖 DOM 的操作
} else {
console.log("image loaded but element was removed");
// 可选择忽略，或触发清理逻辑
}
}总结
- onload 是资源级事件，与 DOM 生命周期解耦；
- 移除节点 ≠ 取消网络请求，这是浏览器性能与规范一致性的体现；
- 开发者应主动管理事件生命周期，而非依赖 DOM 移除自动清理；
- 在动态渲染、列表懒加载、组件销毁等场景中，务必检查 element.isConnected 或采用显式事件解绑策略，以保障逻辑健壮性与用户体验一致性。
