为什么通过JavaScript添加loading="lazy"属性无法实现图片懒加载？

核心原因 #

浏览器解析HTML的时序远早于JS执行时机，loading="lazy"属性只有在浏览器解析img标签、发起图片请求之前存在才会生效，等你用JS给img加属性的时候，图片请求早就已经发完了。

具体的页面加载时序是这样的：

1. 浏览器拉取到HTML文档后会流式解析，边构建DOM树边识别外链资源，只要解析到带src属性的img标签，就会立刻发起图片资源请求，这个阶段不会等JS加载执行完成。
2. 你写的JS代码不管是放在body末尾，还是监听DOMContentLoaded事件触发后执行，执行时机都在所有HTML标签解析完成之后，此时所有img的图片请求已经发起甚至加载完成，再给标签加loading="lazy"属性完全不会生效，这也是你检查元素能看到属性挂载成功，但懒加载不生效的原因。

解决办法 #

方案1：调整属性赋值逻辑（适合需要JS批量处理的场景） #

不要在img标签的src属性里直接写真实图片地址，改用data-src这类自定义属性存储地址，等你给img加上loading="lazy"属性之后，再把自定义属性的值赋值给src触发浏览器请求，这时候懒加载属性就能正常生效。
对应的代码修改如下：

JS代码

let imgs = document.querySelectorAll('img');
for (let i = 0; i < imgs.length; i++) {
  const img = imgs[i];
  img.setAttribute('loading', 'lazy');
  // 赋值真实地址触发请求
  img.src = img.dataset.src;
}

HTML代码

<div class="container">
  <img data-src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24" alt="">
  <img data-src="https://images.unsplash.com/photo-1494253109108-2e30c049369b" alt="">
  <img data-src="https://images.unsplash.com/photo-1494232410401-ad00d5433cfa" alt="">
</div>

CSS代码不用修改，保持原样即可：

img {
  max-width: 100%;
  height: auto;
}

.container {
  margin-top: 2000px;
}

方案2：直接在HTML中写入属性（更推荐） #

如果有条件在服务端渲染、或者静态页面编写阶段就给img加上loading="lazy"属性，这是成本最低、兼容性最好的实现方式，不需要额外的JS处理。

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