HTMLImageElement: loading 属性

值

一个字符串，用于提示用户代理如何最好地安排图片的加载，以优化页面性能。可能的值有：

eager

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

lazy

告诉用户代理在浏览器估算图片即将需要时才开始加载。例如，如果用户正在滚动文档，lazy 的值将导致图片仅在即将出现在窗口 可视视口 前不久才被加载。

用法说明

必须启用 JavaScript

仅当启用了 JavaScript 时才会延迟加载。这是一种反跟踪措施，因为如果用户代理在禁用脚本时支持延迟加载，网站仍然可以通过策略性地在页面标记中放置图片来跟踪用户在会话中的大致滚动位置，从而允许服务器跟踪请求的图片数量和时间。

load 事件的时机

当文档完全处理完毕时，会触发 load 事件。当图片被急切加载（这是默认行为）时，文档中的所有图片都必须在 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> 元素
• MDN 学习区域中的 Web 性能
• MDN Web 性能指南中的 延迟加载