如何正确监听元素加载完成事件

在图片加载过程中，`img` 元素的 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($('#a vatar'),   $el => console.log('A vatar ready!'),  $el => console.error('A vatar failed to load'));

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

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

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