initial commit

8 files changed, 846 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/htmlimageelement/complete/index.html b/files/zh-cn/web/api/htmlimageelement/complete/index.html
new file mode 100644
index 0000000000..cff31934c9
--- /dev/null
+++ b/files/zh-cn/web/api/htmlimageelement/complete/index.html
@@ -0,0 +1,90 @@
+---
+title: HTMLImageElement.complete
+slug: Web/API/HTMLImageElement/complete
+translation_of: Web/API/HTMLImageElement/complete
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">{{domxref("HTMLImageElement")}} 的只读属性 <code><strong>complete</strong></code> 是一个布尔值， 表示图片是否完全加载完成。</span></p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">let <em>doneLoading</em> = <em>htmlImageElement</em>.complete;</pre>
+
+<h3 id="值">值</h3>
+
+<p>当图片完全加载完成时值为 <code>true</code> ； 否则，值为 <code>false</code>。</p>
+
+<p>以下任意一条为true则认为图片完全加载完成：</p>
+
+<ul>
+ <li>Neither the {{htmlattrxref("src", "img")}} nor the {{htmlattrxref("srcset", "img")}} attribute is specified.</li>
+ <li>The <code>srcset</code> attribute is absent and the <code>src</code> attribute, while specified, is the empty string (<code>""</code>).</li>
+ <li>The image resource has been fully fetched and has been queued for rendering/compositing.</li>
+ <li>The image element has previously determined that the image is fully available and ready for use.</li>
+ <li>The image is "broken;" that is, the image failed to load due to an error or because image loading is disabled.</li>
+</ul>
+
+<p>It's worth noting that due to the image potentially being received asynchronously, the value of <code>complete</code> may change while your script is running.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Consider a photo library app that provides the ability to open images into a lightbox mode for improved viewing as well as editing of the image. These photos may be very large, so you don't want to wait for them to load, so your code uses <code>async</code>/<code>await</code> to load the images in the background.</p>
+
+<p>But imagine that you have other code that needs to only run when the image has completed loading, such as a command that performs red-eye removal on the image in the lightbox. While ideally this command wouldn't even be executed if the image hasn't fully loaded, for improved reliability you want to check to ensure this is the case.</p>
+
+<p>So the <code>fixRedEyeCommand()</code> function, which is called by the button that triggers red-eye removal, checks the value of the lightbox image's <code>complete</code> property before attempting to do its work. This is demonstrated in the code below.</p>
+
+<pre class="brush: js">let lightboxElem = document.querySelector("#lightbox");
+let lightboxImgElem = lightboxElem.querySelector("img");
+let lightboxControlsElem = lightboxElem.querySelector(".toolbar");
+
+async function loadImage(url, elem) {
+  return new Promise((resolve, reject) =&gt; {
+    elem.onload = () =&gt; resolve(elem);
+    elem.onerror = reject;
+    elem.src = src;
+  });
+}
+
+async function lightBox(url) {
+  lightboxElem.style.display = "block";
+  await loadImage("https://somesite.net/huge-image.jpg", lightboxImgElem);
+  lightboxControlsElem.disabled = false;
+}
+
+/* ... */
+
+function fixRedEyeCommand() {
+  if (lightboxElem.style.display === "block" &amp;&amp; lightboxImgElem.complete) {
+    fixRedEye(lightboxImgElem);
+  } else {
+    /* can't start doing this until the image is fully loaded */
+  }
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<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', '#dom-img-complete', 'HTMLImageElement.complete')}}</td>
+   <td>{{Spec2('HTML DOM')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLImageElement.complete")}}</p>
diff --git a/files/zh-cn/web/api/htmlimageelement/decode/index.html b/files/zh-cn/web/api/htmlimageelement/decode/index.html
new file mode 100644
index 0000000000..b04b67a431
--- /dev/null
+++ b/files/zh-cn/web/api/htmlimageelement/decode/index.html
@@ -0,0 +1,68 @@
+---
+title: HTMLImageElement.decode()
+slug: Web/API/HTMLImageElement/decode
+translation_of: Web/API/HTMLImageElement/decode
+---
+<div>
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>{{domxref("HTMLImageElement")}} 接口的 <strong><code>decode()</code></strong> 方法返回一个当图片解码后可安全用于附加到 DOM 上时 resolves 的 {{jsxref("Promise")}} 对象。 这可用于在将图片附加到一个 DOM 中的元素（或作为一个新元素加入 DOM 中）之前启动加载，所以在将图像添加到 DOM 时可以立即渲染图像。这反过来，防止了将图像加入DOM后图像的加载造成下一帧渲染的延迟。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <var>promise</var> = <em>HTMLImageElement</em>.decode();</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>无.</p>
+
+<h3 id="返回">返回</h3>
+
+<p>一个一旦数据准备好可供使用时resolve的promise对象.</p>
+
+<h3 id="异常">异常</h3>
+
+<p>{{domxref('DOMException')}} 表示解码图像时出错。</p>
+
+<h2 id="使用提示">使用提示</h2>
+
+<p>一个 <code>decode()</code> 的潜在用例：当在加载一个非常大的图片时（例如，一个在线相册），你可以在加载初期提供一个低分辨率的缩略图，之后通过实例化一个 {{domxref("HTMLImageElement")}} 将该图像替换为一个全分辨率图像，设置其 source 为全分辨率图像URL，使用 <code>decode()</code> 获取一旦全分辨率图像准备好被使用时 resolved 的 promise 对象。这时你可以使用当前可用的全分辨率图像替换之前的低分辨率图像。</p>
+
+<h2 id="例子">例子</h2>
+
+<p>以下例子展示了如何使用 <code>decode()</code> 方法来控制一个图像插入 DOM 的时机。若不使用 {{domxref('Promise')}} 返回方法，你将在图像的 {{event("load")}} 事件处理函数中将图像加入 DOM 中，通过 {{event("error")}} 事件处理函数处理错误。</p>
+
+<pre class="brush: js">const img = new Image();
+img.src = 'nebula.jpg';
+img.decode()
+.then(() =&gt; {
+  document.body.appendChild(img);
+})
+.catch((encodingError) =&gt; {
+  // Do something with the error.
+})
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','#dom-img-decode','decode()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.HTMLImageElement.decode")}}</p>
diff --git a/files/zh-cn/web/api/htmlimageelement/decoding/index.html b/files/zh-cn/web/api/htmlimageelement/decoding/index.html
new file mode 100644
index 0000000000..2bffa6f664
--- /dev/null
+++ b/files/zh-cn/web/api/htmlimageelement/decoding/index.html
@@ -0,0 +1,63 @@
+---
+title: HTMLImageElement.decoding
+slug: Web/API/HTMLImageElement/decoding
+translation_of: Web/API/HTMLImageElement/decoding
+---
+<div>{{APIRef}}</div>
+
+<div>{{domxref("HTMLImageElement")}} 接口的 <strong><code>decoding</code></strong> 属性用于告诉浏览器使用何种方式解析图像数据。</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>refStr</var> = <var>imgElem</var>.decoding;
+<var>imgElem</var>.decoding = <var>refStr</var>;</pre>
+
+<h3 id="Values">Values</h3>
+
+<p>使用 {{domxref("DOMString")}} 表示解码方式. 可使用以下值:</p>
+
+<dl>
+ <dd>
+ <ul>
+  <li><strong><code>sync</code></strong>: 同步解码图像，保证与其他内容一起显示。</li>
+  <li><strong><code>async</code></strong>: 异步解码图像，加快显示其他内容。</li>
+  <li><strong><code>auto</code></strong>: 默认模式，表示不偏好解码模式。由浏览器决定哪种方式更适合用户。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p><code>decoding</code> 属性使您可以控制是否允许浏览器尝试异步加载图像。如果这样做会引起问题，您可指定值为 <code>sync</code> 禁止异步加载。异步加载对 {{HTMLElement("img")}} 元素很有用，对屏幕外的图像对象可能会更有用。</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js;highlight:[3]">var img = new Image();
+img.decoding = 'sync';
+img.src = 'img/logo.png';
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifications</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', 'embedded-content.html#dom-img-decoding', 'decoding')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLImageElement.decoding")}}</p>
diff --git a/files/zh-cn/web/api/htmlimageelement/image/index.html b/files/zh-cn/web/api/htmlimageelement/image/index.html
new file mode 100644
index 0000000000..e4e73b99f9
--- /dev/null
+++ b/files/zh-cn/web/api/htmlimageelement/image/index.html
@@ -0,0 +1,111 @@
+---
+title: Image()
+slug: Web/API/HTMLImageElement/Image
+tags:
+  - 图片对象
+translation_of: Web/API/HTMLImageElement/Image
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>Image()</code></strong>函数将会创建一个新的{{domxref("HTMLImageElement")}}实例。</p>
+
+<p>它的功能等价于 {{domxref("Document.createElement()", "document.createElement('img')")}}</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">Image(width, height)</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>width</dt>
+ <dd>图片的宽度 (即 {{htmlattrxref("width", "img")}} 属性).</dd>
+ <dt>height</dt>
+ <dd>图片的高度 (即 {{htmlattrxref("height", "img")}} 属性).</dd>
+</dl>
+
+<h2 id="示例"><span style="line-height: 1.572;">示例</span></h2>
+
+<pre class="brush: js">var myImage = new Image(100, 200);
+myImage.src = 'picture.jpg';
+document.body.appendChild(myImage);</pre>
+
+<div>上面的代码相当于在 {{htmlelement("body")}}中定义了下面的HTML:</div>
+
+<pre class="brush: html">&lt;img width="100" height="200" src="picture.jpg"&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 无论构造函数中指定的大小是多少，都会加载整个位图. 如果在构造时指定了尺寸信息，那么将会反应在实例的 {{domxref("HTMLImageElement.width")}} 和 {{domxref("HTMLImageElement.height")}} 属性上。图像自身的CSS像素值将会反应在{{domxref("HTMLImageElement.naturalWidth")}} 和 {{domxref("HTMLImageElement.naturalHeight")}}属性。如果没有指定值，那么两个属性的值相同</p>
+</div>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}</td>
+   <td>{{spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="兼容性">兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>支持情况</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>支持情况</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-cn/web/api/htmlimageelement/index.html b/files/zh-cn/web/api/htmlimageelement/index.html
new file mode 100644
index 0000000000..19ae9dd455
--- /dev/null
+++ b/files/zh-cn/web/api/htmlimageelement/index.html
@@ -0,0 +1,170 @@
+---
+title: HTMLImageElement
+slug: Web/API/HTMLImageElement
+translation_of: Web/API/HTMLImageElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary"><strong><code>HTMLImageElement</code></strong> 接口提供了特别的属性和方法 (在常规的 {{domxref("HTMLElement")}}之外，它也能通过继承使用)来操纵 {{HTMLElement("img")}} 元素的布局和图像。</span></p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt>
+ <dd><code>Image()</code> 构造器，带有两个可选的参数，分别表示资源的宽度和高度，创建了一个尚未被插入 DOM 树中的 <code>HTMLImageElement</code> 实例。When called without parameters, <code>new </code><code>Image()</code> is equivalent to calling {{DOMxRef("Document.createElement()", 'document.createElement("img")')}}.</dd>
+</dl>
+
+<h2 id="属性">属性</h2>
+
+<p><em>从它的父元素 {{domxref("HTMLElement")}} 继承的属性。</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.alt")}}</dt>
+ <dd>一个 {{domxref("DOMString")}} 表示 HTML 属性 {{htmlattrxref("alt", "img")}}，表明图像的后备描述内容，会在图像无法加载时显示。</dd>
+ <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt>
+ <dd>返回一个 {{domxref("Boolean")}} 如果浏览器已经下载完毕，并且图像是<a href="/en-US/docs/HTML/Element/Img#Image_Format" title="HTML/Element/Img#Image Format">受支持的图片类型</a>、解码的过程中没有发生错误，则返回 <code>true</code>。That means this value is also <code>true</code> if the image has no {{domxref("HTMLImageElement.src", "src")}} value indicating an image to load.</dd>
+ <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt>
+ <dd>一个 {{domxref("DOMString")}} 表示这个img元素的 CORS 设置。参考 <a href="/en-US/docs/HTML/CORS_settings_attributes" title="HTML/CORS settings attributes">CORS settings attributes</a>。This may be <code>null</code> if CORS is not used.</dd>
+ <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}</dt>
+ <dd>返回一个 {{domxref("DOMString")}}  表示加载当前显示的图像的URL。<br>
+ 这可能会改变，因为图像是调整，由于不断变化的条件，由任何 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">media queries</a> 的地方。</dd>
+ <dt>{{domxref("HTMLImageElement.decoding")}}</dt>
+ <dd>An optional {{domxref("DOMString")}} representing a hint given to the browser on how it should decode the image. If this value is provided, it must be one of the possible permitted values: <code>sync</code> to decode the image synchronously, <code>async</code> to decode it asynchronously, or <code>auto</code> to indicate no preference (which is the default). Read the {{domxref("HTMLImageElement.decoding", "decoding")}} page for details on the implications of this property's values.</dd>
+ <dt>{{domxref("HTMLImageElement.height")}}</dt>
+ <dd>一个整数，表示 HTML 属性 {{htmlattrxref("height", "img")}}，说明了图像在 CSS 像素中渲染的高度。</dd>
+ <dt>{{domxref("HTMLImageElement.isMap")}}</dt>
+ <dd>一个 {{domxref("Boolean")}} 表示 HTML 属性 {{htmlattrxref("ismap", "img")}}，说明了图像是某个服务器端图像映射的一部分。This is different from a client-side image map, specified using an <code>&lt;img&gt;</code> element and a corresponding {{HTMLElement("map")}} which contains {{HTMLElement("area")}} elements indicating the clickable areas in the image. The image <em>must</em> be contained within an {{HTMLElement("a")}} element; see the <code>ismap</code> page for details.</dd>
+ <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt>
+ <dd>返回一个整数，如果可用的话，表明图像在 CSS 中固有的高度，单位为像素；否则返回 <code>0</code>。如果图片是以其原来的大小渲染，则此值等于图片的高度。</dd>
+ <dt>{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}</dt>
+ <dd>返回一个整数，如果可用的话，表明图像在 CSS 中固有的宽度，单位为像素；否则返回 <code>0</code>。如果图片是以其原来的大小渲染，则此值等于图片的宽度。</dd>
+ <dt>{{domxref("HTMLImageElement.referrerPolicy")}}</dt>
+ <dd>A {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "img")}} HTML attribute, which tells the {{Glossary("user agent")}} how to decide which referrer to use in order to fetch the image. Read this article for details on the possible values of this string.</dd>
+ <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the {{htmlattrxref("sizes", "img")}} HTML attribute. This string specifies a list of comma-separated conditional sizes for the image; that is, for a given viewport size, a particular image size is to be used. Read the documentation on the {{domxref("HTMLImageElement.sizes", "sizes")}} page for details on the format of this string.</dd>
+ <dt>{{domxref("HTMLImageElement.src")}}</dt>
+ <dd>一个 {{domxref("DOMString")}} 表示 HTML 属性 {{htmlattrxref("src", "img")}}，包含图像的完整的 URL，包含图像的基础 URL。</dd>
+ <dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt>
+ <dd>一个 {{domxref("DOMString")}} 表示 HTML 属性 {{htmlattrxref("srcset", "img")}}，包含了候选图像列表，用逗号分隔（<code>',', U+002C COMMA</code>）。一个候选的图像是一个URL 跟着一个 <code>'w'</code> 表示图像的宽度，或者一个 <code>'x'</code> 表示像素密度.</dd>
+ <dt>{{domxref("HTMLImageElement.useMap")}}</dt>
+ <dd>一个 {{domxref("DOMString")}} 表示 HTML 属性 {{htmlattrxref("usemap", "img")}}，包含一个 {{HTMLElement("map")}} 元素的页面本地 URL。The page-local URL is a pound (hash) symbol (<code>#</code>) followed by the ID of the <code>&lt;map&gt;</code> element, such as <code>#my-map-element</code>. The <code>&lt;map&gt;</code> in turn contains {{HTMLElement("area")}} elements indicating the clickable areas in the image.</dd>
+ <dt>{{domxref("HTMLImageElement.width")}}</dt>
+ <dd>一个整数，表示 HTML 属性 {{htmlattrxref("width", "img")}}，说明图像在 CSS 像素中渲染的宽度。</dd>
+ <dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>An integer indicating the horizontal offset of the left border edge of the image's CSS layout box relative to the origin of the {{HTMLElement("html")}} element's containing block.</dd>
+ <dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>The integer vertical offset of the top border edge of the image's CSS layout box relative to the origin of the {{HTMLElement("html")}} element's containing block.</dd>
+</dl>
+
+<h2 id="已废弃的属性">已废弃的属性</h2>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt>
+ <dd>一个 {{domxref("DOMString")}}，表示图像如何与它周围的内容对齐。The possible values are <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, and <code>"center"</code>. This is obsolete; you should instead use CSS (such as {{cssxref("text-align")}}, which works with images despite its name) to specify the alignment.</dd>
+ <dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt>
+ <dd>一个 {{domxref("DOMString")}}，表示图像边框的宽度。此属性已被弃用，应该用 CSS {{cssxref("border")}} 属性来代替它。</dd>
+ <dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt>
+ <dd>一个整数值，指定图像左右的留白，单位为像素。</dd>
+ <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt>
+ <dd>一个 {{domxref("USVString")}}，specifying the URL at which a long description of the image's contents may be found. This is used to turn the image into a hyperlink automatically. Modern HTML should instead simply place an <code>&lt;img&gt;</code> inside an {{HTMLElement("a")}} element defining the hyperlink.</dd>
+ <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt>
+ <dd>一个 {{domxref("USVString")}}，specifying the URL of a low-quality (but faster to load) version of the same image. This was once used by browsers under constrained network conditions or on slow devices.</dd>
+ <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt>
+ <dd>一个 {{domxref("DOMString")}}，representing the name of the element.</dd>
+ <dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt>
+ <dd>一个整数值，指定图像上下的留白，单位为像素。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>从它的父元素 {{domxref("HTMLElement")}} 继承的方法。</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.decode()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves when the image is decoded and it's safe to append the image to the DOM. This prevents rendering of the next frame from having to pause to decode the image, as would happen if an undecoded image were added to the DOM.</dd>
+</dl>
+
+<h2 id="错误">错误</h2>
+
+<ul>
+ <li>The {{htmlattrxref("src", "img")}} attribute is empty or <code>null</code>.</li>
+ <li>The specified <code>src</code> URL is the same as the URL of the page the user is currently on.</li>
+ <li>The specified image is corrupted in some way that prevents it from being loaded.</li>
+ <li>The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <code>&lt;img&gt;</code> element's attributes.</li>
+ <li>The specified image is in a format not supported by the {{Glossary("user agent")}}.</li>
+</ul>
+
+<dl>
+ <dd>If an error occurs while trying to load or render the image, and an {{htmlattrxref("onerror")}} event handler has been configured to handle the {{event("error")}} event, that event handler will get called. This can happen in a number of situations, including:</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js">var img1 = new Image(); // Image 构造器
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // 使用 DOM <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl" title="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl">HTMLImageElement</a>
+img2.src = 'image2.jpg';
+img2.alt = 'alt text';
+document.body.appendChild(img2);
+
+// 使用文档中的第一个 img
+alert(document.images[0].src);
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td><font face="Open Sans, Arial, sans-serif">添加 </font><code>x</code> 和 <code>y</code> 属性。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>以下属性被添加了：<code>srcset</code>、<code>currentSrc</code> 和 <code>sizes</code>。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>一个构造器（带有 2 个可选的参数）已经被添加.<br>
+    以下属性已被弃用：<code>name</code>、<code>border</code>、<code>align</code>、<code>hspace</code>、<code>vspace</code>，和 <code>longdesc</code>.<br>
+    以下属性现在是 <code>unsigned long</code>, 类型，不再是 <code>long</code> 类型: <code>height</code> 和 <code>width</code>。<br>
+    添加了以下属性：<code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code>, 和<code>complete</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>lowSrc</code> 属性已被移除。<br>
+    以下属性现在是 <code>long</code> 类型了，而不是 <code>DOMString</code> 类型了： <code>height</code>、<code>width</code>、<code>hspace</code>，和 <code>vspace</code>。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>初始定义。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.HTMLImageElement")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>实现了这个接口的 HTML 元素：{{HTMLElement("img")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlimageelement/loading/index.html b/files/zh-cn/web/api/htmlimageelement/loading/index.html
new file mode 100644
index 0000000000..9566b4a7c1
--- /dev/null
+++ b/files/zh-cn/web/api/htmlimageelement/loading/index.html
@@ -0,0 +1,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>
diff --git a/files/zh-cn/web/api/htmlimageelement/referrerpolicy/index.html b/files/zh-cn/web/api/htmlimageelement/referrerpolicy/index.html
new file mode 100644
index 0000000000..c670d136f3
--- /dev/null
+++ b/files/zh-cn/web/api/htmlimageelement/referrerpolicy/index.html
@@ -0,0 +1,120 @@
+---
+title: HTMLImageElement.referrerPolicy
+slug: Web/API/HTMLImageElement/referrerPolicy
+translation_of: Web/API/HTMLImageElement/referrerPolicy
+---
+<div>{{APIRef}}{{SeeCompatTable}}</div>
+
+
+
+<p><code><strong>HTMLImageElement</strong></code><strong><code>.referrerPolicy</code></strong> 反映了 {{HTMLElement("img")}} 元素的HTML属性 {{htmlattrxref("referrerpolicy","img")}} 的定义，这个属性定义了{{HTMLElement("img")}} 元素在获取资源时的引用方式。</p>
+
+
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>refStr</var> = <var>imgElt</var>.referrerPolicy;
+<var>imgElt</var>.referrerPolicy = <var>refStr</var>;</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dd>
+ <ul>
+  <li><code>"no-referrer"</code> 表示HTTP头部信息将不会发送 <code>referrer</code> 。</li>
+  <li><code>"origin"</code> 表示 referrer 只包含策略、主机名、端口等页面源的信息。</li>
+  <li><code>"unsafe-url"</code> 这意味着引用者将包括源站和路径（但不包括片段、密码或用户名）。这种情况是不安全的，因为它可能会泄漏路径信息，这些信息已被使用TLS隐藏到第三方。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js;highlight:[3]">var img = new Image();
+img.src = 'img/logo.png';
+img.referrerPolicy = 'origin';
+
+var div = document.getElementById('divAround');
+div.appendChild(img); // Fetch the image using the origin as the referrer
+</pre>
+
+<h2 id="Specifications" name="Specifications">规范</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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerPolicy attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerPolicy</code> property.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("51")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("50.0")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera("38")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("51")}}</td>
+   <td>{{CompatChrome("51")}}</td>
+   <td>{{CompatGeckoMobile("50.0")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 从火狐45到50，这都是在network.http.enableperelementerfer首选项之后。从火狐42到44，这个属性被称为referer。</p>
+
+<h2 id="相关">相关</h2>
+
+<ul>
+ <li>{{domxref("HTMLAnchorElement.referrerPolicy")}}, {{domxref("HTMLAreaElement.referrerPolicy")}}, and {{domxref("HTMLIFrameElement.referrerPolicy")}}.</li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlimageelement/srcset/index.html b/files/zh-cn/web/api/htmlimageelement/srcset/index.html
new file mode 100644
index 0000000000..9e100502ee
--- /dev/null
+++ b/files/zh-cn/web/api/htmlimageelement/srcset/index.html
@@ -0,0 +1,126 @@
+---
+title: HTMLImageElement.srcset
+slug: Web/API/HTMLImageElement/srcset
+translation_of: Web/API/HTMLImageElement/srcset
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">{{domxref("HTMLImageElement")}} 的 <code><strong>srcset</strong></code> 的值是一个字符串，用来定义一个或多个图像候选地址，以 <code>,</code>分割，每个候选地址将在特定条件下得以使用。候选地址</span>包含图片 URL 和一个可选的宽度描述符和像素密度描述符，该候选地址用来在特定条件下替代原始地址成为 {{domxref("HTMLImageElement.src", "src")}}  的属性。</p>
+
+<p>The <code>srcset</code> property, along with the {{domxref("HTMLImageElement.sizes", "sizes")}} property, are a crucial component in designing responsive web sites, as they can be used together to make pages that use appropriate images for the rendering situation.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>htmlImageElement</em>.srcset = <em>imageCandidateStrings</em>;
+let <em>srcset</em> = <em>htmlImageElement</em>.srcset;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("USVString")}} containing a comma-separated list of one or more image candidate strings to be used when determining which image resource to present inside the {{HTMLElement("img")}} element represented by the <code>HTMLImageElement</code><em>.</em></p>
+
+<p>Each image candidate string must begin with a valid URL referencing a non-interactive graphic resource. This is followed by a comma (<code>,</code>) character and then a condition descriptor that indicates the circumstances in which the indicated image should be used. Space characters, other than the whitespace separating the URL and the corresponding condition descriptor, are ignored; this includes both leading and trailing space, as well as space before or after each comma.</p>
+
+<p>If the condition descriptor is not provided (in other words, the image candidate provides only a URL), the candidate is used as the fallback if none of the other candidates match. Otherwise, the condition descriptor may take one of two forms:</p>
+
+<ul>
+ <li>To indicate that the image resource specified by the image candidate string should be used when the image is being rendered with a particular width in pixels, provide a <strong>width descriptor</strong> comprised the number giving that width in pixels followed by the lower case letter "w". For example, to provide an image resource to be used when the renderer needs a 450 pixel wide image, use the width descriptor string <code>450w</code>. The specified width must be a positive, non-zero, integer, and <em>must</em> match the intrinsic width of the referenced image.</li>
+ <li>Alternatively, you can use a <strong>pixel density descriptor</strong>, which specifies the condition in which th corresponding image resource should be used as the display's pixel density. This is written by stating the pixel density as a positive, non-zero floating-point value followed by the lower-case letter "x". As an example, to state that the corresponding  image should be used when the pixel density is double the standard density, you can give the pixel density descriptor <code>2x</code> or <code>2.0x</code>.</li>
+</ul>
+
+<p>You may mix and match the two types of descriptor. You must not, however, provide multiple image candidate strings that specify the same descriptor. All of the following are valid image candidate strings:</p>
+
+<pre>"images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full 2048w"</pre>
+
+<p>This string provides versions of an image to be used at the standard pixel density (<code>1x</code>) as well as double that pixel density (<code>2x</code>). Also available is a version of the image for use at a width of 2048 pixels (<code>2048w</code>).</p>
+
+<pre>"header640.png 640w, header960.png 960w, header1024.png 1024w, header.png"</pre>
+
+<p>This string provides versions of a header image to use when the {{Glossary("user agent", "user agent's")}} renderer needs an image of width 640px, 960px, or 1024px. An additional, fallback image candidate is provided without any condition at all, to be used for any other width.</p>
+
+<pre>"icon32px.png 32w, icon64px.png 64w, icon-retina.png 2x icon-ultra.png 3x icon.svg"</pre>
+
+<p>Here, options are provided for an icon at widths of 32px and 64px, as well as at pixel densities of 2x and 3x. A fallback image is provided as an SVG file that should be used in all other cases. Notice that the candidates may use different image types.</p>
+
+<p>For more information on what image formats are available for use in the {{HTMLElement("img")}} element, see <a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a>.</p>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The HTML below indicates that the default image is the 200 pixel wide version of the clock image we use in several places throughout our documentation. Also specified by the <code>srcset</code> attribute is that the 200-pixel version should be used for 1x displays while the 400-pixel version should be used for 2x displays.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;img src="/files/16797/clock-demo-200px.png"
+       alt="Clock"
+       srcset="/files/16864/clock-demo-200px.png 1x, /files/16797/clock-demo-400px.png 2x"&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>The CSS simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it. Also provided is the {{cssxref("word-break")}} attribute, using the <code>break-all</code> value to tell the browser to wrap the string within the width available regardless of where in the string the wrap must occur.</p>
+
+<pre class="brush: css">.box {
+  width: 200px;
+  border: 2px solid rgba(150, 150, 150, 255);
+  padding: 0.5em;
+  word-break: break-all;
+}
+
+.box img {
+  width: 200px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>The following code is run within a handler for the {{domxref("Window", "window")}}'s {{domxref("Window.load_event", "load")}} event.  It uses the image's  {{domxref("HTMLImageElement.currentSrc", "currentSrc")}} property to fetch and display the URL selected by the browser from the <code>srcset</code>.</p>
+
+<pre class="brush: js">let box = document.querySelector(".box");
+let image = box.querySelector("img");
+
+let newElem = document.createElement("p");
+newElem.innerHTML = `Image: &lt;code&gt;${image.currentSrc}&lt;/code&gt;`;
+box.appendChild(newElem);
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>In the displayed output below, the selected URL will correspond with whether your display results in selecting the 1x or the 2x version of the image. If you happen to have both standard and high density displays, try moving this window between them and reloading the page to see the results change.</p>
+
+<p>{{EmbedLiveSample("Example", 640, 320)}}</p>
+
+<p>For additional examples, see our guide to <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive images</a>.</p>
+
+<h2 id="Specifications">Specifications</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', '#dom-img-srcset', 'HTMLImageElement.srcset')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLImageElement.srcset")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></li>
+</ul>