HTML img属性"完成"

Question

任何人都可以解释属性的含义complete吗？

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

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

Answer 1

该属性complete没有按规范定义,并且可能没有效果(尽管可以使用该getAttribute()方法读取).所以问题中的代码可能是基于一些误解.

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

这个属性是广泛存在的浏览器,但显然是以一种破碎的方式:如果你有一个img元素引用一个不存在的资源(404 Not Found),那么Chrome和Firefox将该属性指示为值为true(IE在这里得到的东西:假).所以该物业暂时没有多大用处.

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

Answer 2

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

我从来没有在HTML中明确地看到过它(例如MDN说它不是img元素的属性).我只是用来检查图像是否已经使用JavaScript下载(但是存在跨浏览器问题).a上的属性HTMLImageElement返回a Boolean.

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