JS实现图片懒加载无法跨页面生效、无法更新数组下一张图片问题

问题根源 #

你遇到的跨页面不生效、变量指向错误问题，核心是以下几个代码错误：

• 所有变量未加let/const声明，默认变成全局变量，每次循环调用都会覆盖上一次的变量值，等图片加载完成触发回调时，所有回调读取的都是最后一次循环赋值的变量，自然只会处理最后一个元素。
• 函数参数接收错误：你在循环里调用lazyLoaderSetup时传了两个参数（当前元素和索引），但lazyLoaderSetup的形参只定义了一个，导致参数读取逻辑异常。
• 重复ID冲突：你给每个生成的高清图都设置了相同的id="mainBackground"，HTML规范要求ID全局唯一，重复ID会导致DOM选择逻辑异常，跨页面时冲突会更明显。
• 回调函数依赖全局变量：removeAppend直接读取全局变量，没有和当前触发加载的图片绑定，逻辑完全依赖全局变量的当前值，必然出现指向错误。

修复后的代码 #

// 选中所有需要替换的容器
const resImageReplacements = document.getElementsByClassName('res-image-replacement');

for (let i = 0; i < resImageReplacements.length; i++) {
  lazyLoaderSetup(i);
}

function lazyLoaderSetup(index) {
  // 所有变量加const声明，限制在当前函数作用域内，不会被覆盖
  const highResImage = document.createElement("IMG");
  const lowResImage = document.getElementsByClassName('picturesToBeSwapped')[index];
  const resReplacement = document.getElementsByClassName("res-image-replacement")[index];

  // 设置高清图属性，移除重复的id设置，如有需要可以保留class
  highResImage.setAttribute("class", "mainBackground");
  highResImage.setAttribute('src', lowResImage.getAttribute("high-res-src"));

  if (resReplacement.contains(lowResImage)) {
    // 回调直接写在内部，通过闭包读取当前作用域的变量，不需要依赖全局
    highResImage.addEventListener('load', function removeAppend() {
      resReplacement.removeChild(lowResImage);
      resReplacement.appendChild(highResImage);
      highResImage.removeEventListener('load', removeAppend);
    });
  }
}

修复说明 #

1. 所有内部变量都加了const声明，限制在函数作用域内，每次循环的变量互相独立不会覆盖
2. 把替换逻辑的回调直接写在lazyLoaderSetup内部，通过闭包直接读取当前处理的三个元素，不需要依赖全局变量
3. 移除了重复的ID设置，避免DOM ID冲突
4. 修正了参数传递逻辑，不需要额外传递容器元素，直接通过索引读取即可

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