HTMLImageElement.loading

在此页

句法
用法注意事项
范例
规范
浏览器兼容性
另请参阅
相关话题

HTMLImageElement property loading is a string whose value provides a hint to the 用户代理 that tells the browser how to handle loading images which are currently outside the window's visual viewport . This helps to optimize the loading of the document's contents by postponing loading the image until it's expected to be needed, rather than immediately during the initial page load.

句法

let imageLoadScheduling = htmlImageElement.loading;
htmlImageElement.loading = eagerOrLazy;

值

A DOMString providing a hint to the user agent as to how to best schedule the loading of the image to optimize page performance. The possible values are:

eager: The default behavior, eager tells the browser to load the image as soon as the <img> element is processed.
lazy: Tells the user agent to hold off on loading the image until the browser estimates that it will be needed imminently. For instance, if the user is scrolling through the document, a value of lazy will cause the image to only be loaded shortly before it will appear in the window's visual viewport .

用法注意事项

Timing of the load event

load event is fired when the document has been fully processed. When images are loaded eagerly (which is the default), every image in the document must be fetched before the load event can fire.

By specifying the value lazy for loading , you prevent the image from delaying the load attribute by the amount of time it takes to request, fetch, and process the image.

Images whose loading attribute is set to lazy but are located within the visual viewport immediately upon initial page load are loaded as soon as the layout is known, but their loads do not delay the firing of the load event. In other words, these images aren't loaded immediately when processing the <img> element, but are still loaded as part of the initial page load. They justt don't affect the timing of the load 事件。

That means that when load fires, it's possible that any lazy-loaded images located in the visual viewport may not yet be visible.

Preventing element shift during image lazy loads

When an image whose loading has been delayed by the loading attribute being set to lazy is finally loaded, the browser will determine the final size of the <img> element based on the style and intrinsic size of the image, then reflow the document as needed to update the positions of elements based on any size change made to the element to fit the image.

To prevent this reflow from occurring, you should explicitly specify the size of the image's presentation using the image element's width and height attributes. By establishing the intrinsic aspect ratio in this manner, you prevent elements from shifting around while the document loads, which can be disconcerting or offputting at best and can cause users to click the wrong thing at worst, depending on the exact timing of the deferred loads and reflows.

范例

addImageToList() function shown below adds a photo thumbnail to a list of items, using lazy-loading to avoid loading the image from the network until it's actually needed.

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);
}

规范

规范	状态	注释
HTML 实时标准 The definition of 'HTMLImageElement.loading' in that specification.	实时标准

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`loading`	Chrome 76	Edge 79	Firefox 75	IE No	Opera 63	Safari No 不支持 No 见 bug 196698	WebView Android No	Chrome Android 76	Firefox Android No	Opera Android 54	Safari iOS No 不支持 No 见 bug 196698	Samsung Internet Android No

图例

完整支持
不支持
实验。期望将来行为有所改变。

另请参阅

<img> element
Web performance in the MDN Learning Area
Lazy loading in the MDN web performance guide
Use lazy loading for images in Tips for authoring fast-loading HTML pages

元数据

最后修改： Mar 23, 2020

在此页

句法

值

用法注意事项

Timing of the load event

Preventing element shift during image lazy loads

范例

规范

浏览器兼容性

图例

另请参阅

相关话题