为什么添加 loading="lazy" 和 JavaScript 不能真正延迟加载图像？

Question

我可以在单个图像上添加 loading="lazy" 属性，或者使用 JavaScript 并一次性应用它们。

但是，当我使用 JavaScript 执行此操作，然后检查页面时，我看到图像在页面加载时加载，但每个图像都附加了属性。

为什么添加 loading="lazy" 和 HTML 会延迟加载图像，而添加属性 JavaScript 不提供延迟加载行为？

let img = document.querySelectorAll('img');
for (let i = 0; i < img.length; i++) {
  let images = img[i];
  images.setAttribute('loading', 'lazy');
}

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

.container {
  margin-top: 2000px;
}

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

Answer 1

这是一个陷阱 22。您需要运行在 HTML 之前的 JS 来设置属性，然后它已经加载，但您不能将属性添加到元素那不存在。

您可以尝试使用 JS 手动创建图像元素，然后添加属性，然后将其添加到 dom。

也许是这样的：

const imgEl = document.createElement("img");
imgEl.src = "https://i.stack.imgur.com/ZCVxN.jpg?s=64&g=1"
imgEl.setAttribute('loading', 'lazy');

const body = document.querySelector("body")
body.appendChild(imgEl);

为什么添加 loading="lazy" 和 JavaScript 不能真正延迟加载图像？

Why doesn't adding loading="lazy" with JavaScript work to actually lazy load the images?

javascript

lazy-loading