addEventListener("load")仅触发两次，顺序加载图片异常及实现命名咨询

一、你的加载方式该如何称呼？ #

你这种通过函数自身调用、依次逐个加载图片的非循环实现，叫做递归式串行图片预加载（或者简称“递归串行加载”）。它核心是用递归替代传统的for/while循环，实现按顺序逐个完成加载任务，特别适合需要严格保证加载顺序的场景（比如你的序列动画需求）。

二、仅加载2张图片、load事件仅触发两次的可能原因及解决方案 #

结合你给出的代码片段，大概率是以下几个问题导致的，我给你逐一分析并附上修正思路：

1. 事件绑定时机错误：先设src再绑load事件 #

如果你的代码是先给图片设置了src，再绑定load事件，很可能遇到图片已被浏览器缓存同步加载完成的情况——这时候load事件已经触发过了，绑定的监听器根本收不到信号，递归就会卡在当前步骤，无法继续加载后续图片。

2. 未处理图片加载失败的情况 #

如果第3张及以后的图片存在路径错误、资源不存在的问题，且你没有绑定error事件处理失败场景，那么加载失败时不会触发load事件，递归调用就会中断，导致后续图片完全没机会加载。

3. src设置逻辑有问题 #

比如你设置的src和图片原本的src完全一致，浏览器会认为无需重新加载，自然不会触发load事件；或者你从data-src（或其他属性）读取真实地址时出错，导致src没被正确设置。

修正后的示例代码 #

这里给你调整了逻辑，解决上述问题：

function init() {
  var imgDefer = document.querySelectorAll(".img-sequence");
  var lastLoadIndex = 0;

  function loadNextImage() {
    // 边界判断：所有图片处理完就退出
    if (lastLoadIndex >= imgDefer.length) {
      console.log("✅ 所有序列图片加载完成");
      return;
    }

    const currentImg = imgDefer[lastLoadIndex];
    console.log("正在加载第 " + (lastLoadIndex + 1) + " 张图片");

    // 定义加载成功/失败的处理函数
    function onImageLoad() {
      // 先移除监听器避免内存泄漏
      currentImg.removeEventListener("load", onImageLoad);
      currentImg.removeEventListener("error", onImageError);
      // 索引递增，递归加载下一张
      lastLoadIndex++;
      loadNextImage();
    }

    function onImageError() {
      console.error("❌ 第 " + (lastLoadIndex + 1) + " 张图片加载失败");
      currentImg.removeEventListener("load", onImageLoad);
      currentImg.removeEventListener("error", onImageError);
      // 即使加载失败，也继续处理下一张（根据需求可调整）
      lastLoadIndex++;
      loadNextImage();
    }

    // 先绑定事件，再设置真实src！
    currentImg.addEventListener("load", onImageLoad);
    currentImg.addEventListener("error", onImageError);

    // 假设你用data-src存储真实图片地址，替换成你的实际逻辑
    const realImageSrc = currentImg.getAttribute("data-src");
    if (realImageSrc) {
      currentImg.setAttribute("src", realImageSrc);
    } else {
      console.error("⚠️ 未找到第 " + (lastLoadIndex + 1) + " 张图片的真实地址");
      onImageError();
    }
  }

  // 启动递归加载
  loadNextImage();
}

// DOM加载完成后初始化
document.addEventListener("DOMContentLoaded", init);

关键优化点 #

• 先绑事件再设src：确保无论图片是否被缓存，监听器都能捕获到加载事件；
• 添加error事件处理：避免因单张图片加载失败导致整个加载流程中断；
• 移除事件监听器：防止内存泄漏，尤其是当图片元素被频繁操作时；
• 明确边界判断：避免索引越界。

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