JS动态生成图片设置loading=lazy懒加载不生效问题求助

核心问题原因 #

• 属性设置顺序错误：你当前代码是先给img.src赋值，再设置loading="lazy"属性。浏览器只要获取到src地址就会立刻发起图片资源请求，后续再添加懒加载属性已经无法拦截请求，自然不会生效。
• 执行时机异常：你直接在HTML中同步调用addImages()，如果这段script代码放在DOM节点#arrayImages之前，会找不到目标节点导致渲染失败；就算放在节点之后，所有图片节点一次性插入DOM时，部分浏览器也可能无法正确识别动态添加的懒加载属性。
• 缺少占位空间声明：原生懒加载要求图片有明确的宽高属性，或者CSS提前给图片预留了占位空间，否则浏览器无法计算图片是否进入视口，会直接加载所有图片。

修复方案 #

1. 调整JS逻辑顺序 #

修改createImageNode函数的属性设置顺序，先加懒加载属性再赋值资源地址：

function createImageNode(bilde) {
  const div1 = document.createElement("div");
  const div2 = document.createElement("div");
  const img = new Image();
  
  // 先设置懒加载属性，再赋值src
  img.setAttribute("loading", "lazy");
  // 已知图片尺寸的话可以补充宽高属性，也可以通过CSS预留占位
  // img.width = 800
  // img.height = 600
  img.src = `img/${bilde.fil}`;

  div1.appendChild(div2);
  div1.classList.add(bilde.class);
  
  div2.appendChild(img);
  div2.classList.add('m2');
  return div1;
}

2. 调整调用时机 #

修改HTML中的调用逻辑，等待DOM完全解析完成后再插入图片节点：

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', addImages)
</script>

3. 补充CSS占位（可选但建议） #

给图片提前预留占位空间，既可以避免页面布局偏移，也能保证懒加载触发逻辑正常：

.m2 img {
  width: 100%;
  height: auto;
  /* 替换成你实际的图片宽高比 */
  aspect-ratio: 16/9;
}

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