如何正确监听img元素load事件

图片的 load 事件常因加载时机早于事件绑定而失效。关键是在绑定前检查 complete 属性，或确保脚本在 DOM 尾部执行，才能可靠触发。

在 jQuery 中为 元素绑定 load 事件，看起来简单，但实际踩坑的人不少。尤其是当脚本放在 中，且依赖 $(document).ready() 时，经常出现“事件不触发”的奇怪现象。问题根源在于：浏览器可能在 JavaScript 执行之前就已经完成了图片加载，load 事件早已触发，此时再去绑定自然无效。

正确做法：兼顾 complete 与 load

可靠的写法必须包含对 img.complete 的判断。该属性是原生 DOM 上的布尔值，能指示图片是否已加载完成。示例代码如下：

const $img = $('img#myImage');
if ($img[0].complete) {
  // 图片已加载完毕，直接执行逻辑
  console.log('Image loaded synchronously:', $img[0]);
  handleImageLoaded($img);
} else {
  // 图片未加载，绑定 load 事件等待完成
  $img.on('load', function() {
    console.log('Image loaded via event:', this);
    handleImageLoaded($(this));
  }).on('error', function() {
    console.warn('Failed to load image:', this.src);
  });
}

注意：$img[0] 获取的是原生 元素，complete 是其标准属性（MDN 有详细说明）。不建议使用 jQuery 的 .prop('complete') 方法替代，因为旧版本 jQuery 对该属性的支持不一致，容易引发问题。

常见误区，看看你踩过几个

• 别只依赖 $(document).ready()：它只保证 DOM 解析完成，并不保证图片已加载。如果图片来自缓存或使用内联 data: URL，很可能在 ready 执行前就已经 complete 了。
• 别用全局 $('img').on('load', ...)：对已 complete 的图片无效，也无法捕获后续动态插入的图片，容易遗漏。
• 推荐做法：
  • 对于静态图片：插入 DOM 后立即检查 complete 并绑定 load。
  • 对于动态插入的图片（如 AJAX 加载的）：创建 后立即检查 complete，再绑定事件。
  • 对于批量处理：封装成可复用函数，避免重复代码。

以下是一个封装好的实用函数：

function onImageLoad($img, onLoad, onError = null) {
  const img = $img[0];
  if (!img) return;
  if (img.complete) {
    onLoad($img);
  } else {
    $img.one('load', () => onLoad($img))
        .one('error', () => onError && onError($img));
  }
}

// 使用示例
onImageLoad($('#avatar'), 
  $el => console.log('Avatar ready!'),
  $el => console.error('Avatar failed to load'));

额外补充：为什么 $(window).on('load') 总是有效？

window 的 load 事件会等待页面上所有资源（图片、样式表、脚本）全部加载完毕后才触发，因此天然避开了单张图片提前加载的问题。但缺点是延迟高、粒度粗，不适合精细化控制某张图片的状态，仅适用于需要全页面资源就绪的场景。

总结：可靠监听图片加载的核心原则是：永远先检查 complete，再决定是否监听 load。 这是跨浏览器、兼容缓存与网络延迟的健壮实践，也是避免踩坑的关键所在。