如何为img标签正确绑定jQuery的load事件？

你遇到的核心问题是：绑定load事件的时机晚于图片加载完成的时机——如果图片在DOM解析时已经被浏览器缓存，或者在你执行绑定代码前就加载完毕，后续绑定的load事件就不会被触发。

下面是几种可行的解决方法：

1. 兼容已加载完成的图片 #

遍历所有img元素，先检查complete属性判断是否已经加载完成，已加载的直接执行回调，未加载的再绑定load事件：

$("img").each(function() {
  const $this = $(this);
  // 检查图片是否已加载完成（排除加载失败的无效图片）
  if (this.complete && this.naturalWidth > 0) {
    console.log($this);
  } else {
    $this.on("load", function() {
      console.log($this);
    });
    // 可选：绑定error事件排查加载失败情况
    $this.on("error", function() {
      console.log("图片加载失败", $this);
    });
  }
});

2. 动态添加图片的处理 #

如果是动态创建的img元素，必须在设置src属性之前绑定load事件，或者创建元素后立即绑定再插入DOM：

// 正确写法：先绑定事件，再设置src/插入DOM
const $newImg = $("<img>");
$newImg.on("load", function() {
  console.log($(this));
});
$newImg.attr("src", "your-image-url.jpg");
$("body").append($newImg);

3. 借助window的load事件兜底 #

如果你的需求是等待所有图片加载完成后执行逻辑，也可以用你一开始写的window.load事件，在里面遍历处理所有img：

$(window).on("load", function() {
  $("img").each(function() {
    console.log($(this));
  });
});

这种方法的缺点是需要等待页面所有资源（包括其他图片、脚本、样式）加载完成，触发时机较晚。

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