纯JavaScript实现动态追加图片加载事件的委托检测

你的问题出在对window.load事件的理解上——这个事件只会在整个页面的初始资源（包括图片、脚本、样式等）全部加载完成后触发一次，后续通过Ajax动态添加的图片加载完成时，根本不会触发这个事件，所以你的代码自然不会有任何输出。

要实现通过事件委托监听动态图片的加载完成，得调整两个关键点：监听的目标元素、事件的捕获模式，还要处理图片缓存的特殊情况。

正确的事件委托实现 #

图片的load事件在部分浏览器中不支持冒泡，所以我们需要在捕获阶段监听事件（事件流的捕获阶段是从根节点到目标元素的传递过程，不受冒泡限制），把监听器绑定到document上即可：

// 定义你的处理函数
function handler(e) {
  console.log('图片加载完成:', this.src);
  // 这里写你的图片处理逻辑
}

// 在document上以捕获模式监听load事件
document.addEventListener('load', function(e) {
  const target = e.target;
  // 校验目标是图片元素，且包含指定类名
  if (target.tagName === 'IMG' && target.classList?.contains('target-class')) {
    handler.call(target, e);
  }
}, true); // 第三个参数设为true，开启捕获模式

处理缓存图片的特殊情况 #

如果图片已经被浏览器缓存，那么当你把它添加到DOM时，load事件可能不会触发（因为图片已经加载完成了）。所以在动态创建图片的Ajax回调里，要额外检查图片的complete属性：

// 假设这是你的Ajax成功回调函数
function handleAjaxResponse(imageUrls) {
  imageUrls.forEach(url => {
    const img = document.createElement('img');
    img.className = 'target-class';
    img.src = url;
    document.body.appendChild(img);

    // 检查图片是否已缓存加载完成
    if (img.complete) {
      handler.call(img);
      console.log('缓存图片已加载:', url);
    }
  });
}

为什么你的原代码无效？ #

再明确下：window.addEventListener('load', ...)监听的是整个页面的初始加载完成事件，和后续动态插入的DOM元素完全无关。只有当页面第一次把所有资源都加载完时，这个回调才会执行一次，之后不管你加多少图片，都不会再触发它。

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