html - HTML img 属性“完成”

Question

谁能解释属性的含义complete？

我在某处读到它可能与 DOM 有关。

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

score 11 · Accepted Answer

该属性complete没有规范定义的含义，它可能没有效果（尽管可以通过getAttribute()方法读取）。所以问题中的代码可能是基于一些误解。

根据 HTML5 草案，根据接口，有对应于元素的对象的complete 属性。属性的定义基本上意味着当浏览器完全接收到图像时该值为真（尽管这里有一些细微差别）。由于这是由浏览器控制的，反映加载状态，自然将属性定义为只读。imgHTMLImageElementcomplete

此属性在浏览器中广泛存在，但显然以一种损坏的方式存在：如果您有一个img引用不存在资源的元素（404 Not Found），那么 Chrome 和 Firefox 将该属性指示为具有值 true （IE 在这里得到了正确的结果：错误的）。所以这个属性暂时用处不大。

在 HTML 中设置属性对此没有影响。只有在定义了对应关系时，HTML 属性和元素对象属性才会相互对应。

score 7 · Accepted Answer

它是在下载图像时设置的。

我从来没有像在你的例子中那样在 HTML 中明确地看到它（MDN说它不是img元素的属性）。我只是用来检查图像是否已使用 JavaScript 下载（但是存在跨浏览器问题）。a 上的属性HTMLImageElement返回 a Boolean。

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

score 0 · Accepted Answer

它用于检查图像是否已完成加载。

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

如果加载完成返回真，否则返回假。但是，它不像您的示例中那样用作属性。

3 回答 3