HTML img 屬性“完整”

Question

誰能解釋一下屬性complete的含義？

我在某處讀到它可能與 DOM 有關。

<img src="/folder/pic.jpeg" complete="complete" /> 

Answer 1

屬性complete沒有規范定義的含義，它可能沒有任何作用（盡管它可以用getAttribute()方法讀取）。 所以問題中的代碼可能是基於一些誤解。

根據 HTML5 草案，根據HTMLImageElement接口，對應於img元素的對象有complete屬性。 complete屬性的定義基本上意味着當瀏覽器完全接收到圖像時該值為 true（盡管這里有一些細微差別）。 由於這是由瀏覽器控制，反映加載狀態，所以屬性被定義為只讀是很自然的。

此屬性廣泛存在於瀏覽器中，但顯然以一種損壞的方式存在：如果您有一個引用不存在的資源（404 未找到）的img元素，則 Chrome 和 Firefox 會將該屬性指示為具有值 true（IE 在此處獲取內容） ： 錯誤的）。 所以這個屬性暫時沒有多大用處。

在 HTML 中設置屬性對此沒有影響。 HTML 屬性和元素對象屬性只有在定義了對應關系后才相互對應。

Answer 2

下載圖像時設置。

我從來沒有像你的例子那樣在 HTML 中明確地看到它（ MDN說它不是img元素的屬性）。 我只是用來檢查圖像是否已使用 JavaScript 下載（但是存在跨瀏覽器問題）。 HTMLImageElement上的HTMLImageElement返回一個Boolean 。

[].forEach.call(document.querySelector("img"), function(img) {
    // Loaded?
    img.complete && (img.style.border = "5px solid #f00");
});

Answer 3

它用於檢查圖像是否已完成加載。

document.getElementsByTagName('img')[0].complete 

如果已完成加載，則返回 true，否則返回 false。 但是，它不像您的示例那樣用作屬性。