jQuery新版本移除load事件后如何实现图片加载完成删除对应p标签

失效原因 #

你原写法的$("img").on("load", ...)本身在jQuery 3.x中是受支持的，代码失效核心有两个常见原因：

1. 图片已经被浏览器缓存时，load事件不会触发，导致回调逻辑不执行
2. JS代码执行时DOM还没渲染完成，事件绑定到了不存在的元素上

修复后代码 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 等待DOM完全渲染完成后执行逻辑
$(function() {
  $("img").each(function() {
    const $currentImg = $(this);
    // 判断图片是否已经加载完成（覆盖缓存场景）
    if (this.complete && this.naturalWidth > 0) {
      $currentImg.siblings("p").remove();
    } else {
      // 未加载完成则绑定load事件
      $currentImg.on("load", function() {
        $currentImg.siblings("p").remove();
      });
      // 可选：如果需要图片加载失败也删除p标签，可把上面一行替换为下面的写法
      // $currentImg.on("load error", function() {
      //   $currentImg.siblings("p").remove();
      // });
    }
  })
})
</script>

代码调整说明 #

• 新增$(function() {})包裹逻辑，确保DOM加载完成后再绑定事件，避免绑定失效
• 新增缓存图片判断逻辑：通过原生DOM属性complete和naturalWidth判断图片是否已经加载完成，覆盖缓存场景下load事件不触发的问题
• 用siblings("p")替代原parent().find("p")，直接查找img的同级p元素，逻辑更简洁，执行效率更高

动态生成img场景补充 #

如果你的img元素是页面加载完成后动态插入的，可使用事件委托方案，同时在插入img时主动判断加载状态即可。

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