From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 .../web/api/htmlimageelement/complete/index.html   | 90 ++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 files/zh-cn/web/api/htmlimageelement/complete/index.html

(limited to 'files/zh-cn/web/api/htmlimageelement/complete')

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>
-- 
cgit v1.2.3-54-g00ecf