时间戳

首页 > 解决方案 > 为什么使用 JavaScript 添加 loading="lazy" 不能真正延迟加载图像？

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

问题描述

我可以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>

标签： javascriptlazy-loading

解决方案

这是一种陷阱 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);

推荐阅读