HTMLImageElement: loading 属性

一个字符串，为用户代理提供有关如何最佳地安排图像加载以优化页面性能的提示。可能的值为

eager

默认行为，eager 告诉浏览器在处理 <img> 元素后立即加载图像。

lazy

告诉用户代理在浏览器估计图像即将需要时才加载图像。例如，如果用户正在滚动浏览文档，则 lazy 值会导致图像仅在它将出现在窗口 视觉视窗 中之前不久才加载。

仅在启用 JavaScript 时才会延迟加载。这是一个反跟踪措施，因为如果用户代理在禁用脚本时支持延迟加载，则网站仍然可以通过在页面标记中战略性地放置图像来跟踪用户在整个会话中的近似滚动位置，以便服务器可以跟踪请求了多少图像以及何时请求。

当文档已完全处理时，将触发 load 事件。当图像以 eager 模式加载（这是默认设置）时，文档中的每个图像都必须在 load 事件能够触发之前被获取。

通过为 loading 指定 lazy 值，您可以防止图像因请求、获取和处理图像所需的时间而延迟 load 属性的触发。

loading 属性设置为 lazy 但位于初始页面加载时立即位于视觉视窗内的图像，将在布局已知后立即加载，但它们的加载不会延迟 load 事件的触发。换句话说，这些图像在处理 <img> 元素时不会立即加载，但仍然作为初始页面加载的一部分进行加载。它们只是不会影响 load 事件的时机。

这意味着当 load 触发时，可能任何位于视觉视窗内且延迟加载的图像尚未可见。

当最终加载一个图像时，该图像的加载因 loading 属性设置为 lazy 而延迟，浏览器将根据图像的样式和固有大小确定 <img> 元素的最终大小，然后根据元素发生的大小变化（以适应图像）来重新调整文档，以便根据需要更新元素的位置。

为了防止发生这种重新调整，您应该使用图像元素的 width 和 height 属性显式指定图像呈现的大小。通过以这种方式建立固有的 纵横比，您可以防止元素在文档加载期间发生位移，这在最好的情况下会让人感到不安或令人反感，在最坏的情况下（取决于延迟加载和重新调整的确切时间）会导致用户点击错误的内容。

下面显示的 addImageToList() 函数使用延迟加载将照片缩略图添加到项目列表中，以避免在实际需要之前从网络加载图像。

function addImageToList(url) {
  const list = document.querySelector("div.photo-list");

  let newItem = document.createElement("div");
  newItem.className = "photo-item";

  let newImg = document.createElement("img");
  newImg.loading = "lazy";
  newImg.width = 320;
  newImg.height = 240;
  newImg.src = url;

  newItem.appendChild(newImg);
  list.appendChild(newItem);
}

• 的 <img> 元素
• Web 性能 在 MDN 学习区
• 延迟加载 在 MDN Web 性能指南中