files/zh-cn/web/api/htmlimageelement/loading/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

---
title: HTMLImageElement.loading
slug: Web/API/HTMLImageElement/loading
tags:
  - 懒加载
translation_of: Web/API/HTMLImageElement/loading
---
<p>{{APIRef("HTML DOM")}}</p>

<p><span class="seoSummary">{{domxref("HTMLImageElement")}} 的<code><strong>loading</strong></code>属性为一个字符串，它的值会提示 {{Glossary("用户代理")}} 告诉浏览器不在{{Glossary("可视视口")}}内的图片该如何加载。这样一来，通过推迟图片加载仅让其在需要的时候加载而非页面初始载入时立刻加载，优化了页面的载入。</span> </p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox notranslate">let <em>imageLoadScheduling</em> = <em>htmlImageElement</em>.loading;
<em>htmlImageElement</em>.loading = <em>eagerOrLazy</em>;
</pre>

<h3 id="值">值</h3>

<p>{{domxref("DOMString")}} 提示用户代理该如何最佳规划图片加载来优化页面性能。可能的值有:</p>

<dl>
 <dt><code>eager</code></dt>
 <dd>默认行为, <code>eager</code> 告诉浏览器当处理 <code>&lt;img&gt;</code> 标签时立即加载图片。</dd>
 <dt><code>lazy</code></dt>
 <dd>告诉用户代理推迟图片加载直到浏览器认为其需要立即加载时才去加载。例如，如果用户正在往下滚动页面，值为 <code>lazy</code> 会导致图片仅在马上要出现在 {{Glossary("可视视口")}}中时开始加载.</dd>
</dl>

<h2 id="使用说明">使用说明</h2>

<h3 id="load事件的时机">load事件的时机</h3>

<p>  {{domxref("Window.load_event","load")}} 事件在文档被完整的处理完成时触发。当图片使用立即加载(默认值)时，文档中的所有图片都会在 <code>load</code> 事件触发前载入。</p>

<p>当 <code>loading</code> 值设为 <code>lazy</code> 时，图片不再会在请求，下载，处理的时间内推迟 <code>load</code> 事件触发。</p>

<p> <code>loading</code> 属性值设为 <code>lazy</code> 但是在页面初次加载时就在可视视口内的图片会立即加载但它们也不会推迟 <code>load</code> 事件。换句话说，这些图片不会在处理  <code>&lt;img&gt;</code> 元素时立即加载，但仍会作为页面初始加载的一部分而加载。他们只是不会影响 <code>load</code> 事件。</p>

<p>这表明当 <code>load</code> 触发时，可视区域内懒加载的图片可能不可见。</p>

<h3 id="防止元素在图片懒加载时出现移位">防止元素在图片懒加载时出现移位</h3>

<p>当一个加载被 <code>loading</code> 属性设为 <code>lazy</code> 的图片最后加载时，浏览器会根据{{HTMLElement("img")}} 元素的尺寸和图片自身大小重排文档，更新被图片影响的元素的位置。</p>

<p>为了防止重排发生，你需要使用 {{htmlattrxref("width", "img")}} 和 {{htmlattrxref("height", "img")}} 属性明确设置图片大小。通过这样建立固有长宽比，你防止了元素的移位。取决于实际的加载时间和重排，移位造成的最小的影响可能只是使用户困惑和不适，最坏的影响则是导致用户点错目标。</p>

<h2 id="示例">示例</h2>

<p>下面展示的 <code>addImageToList()</code> 函数将一个照片缩略图添加到一个物品列表中，使用懒加载防止请求图片，直到其真正需要显示。</p>

<pre class="brush: js notranslate">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);
}
</pre>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#attr-img-loading", "HTMLImageElement.loading")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容">浏览器兼容</h2>

<p>{{Compat("api.HTMLImageElement.loading")}}</p>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li>The {{HTMLElement("img")}} element</li>
 <li><a href="/en-US/docs/Learn/Performance">Web performance</a> in the MDN Learning Area</li>
 <li><a href="/en-US/docs/Web/Performance/Lazy_loading">Lazy loading</a> in the MDN web performance guide</li>
 <li>{{SectionOnPage("/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages", "Use lazy loading for images")}}</li>
</ul>