HTML img attribute “complete”

匿名 (未验证) 提交于 2019-12-03 08:41:19

问题:

Can anyone explain the meaning of the attribute complete?

I read somewhere that it might have to do with DOM.

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

回答1:

It's set when the image has been downloaded.

I've never seen it explicitly in the HTML like in your example (MDN says it's not an attribute for a img element) . I just use to check if the image has been downloaded with JavaScript (there are cross browser issues with that, however). The property on a HTMLImageElement returns a Boolean.

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


回答2:

The attribute complete has no defined meaning by specifications, and it probably has no effect (though it can be read with the getAttribute() method). So the code in the question is probably based on some misunderstanding.

According to HTML5 drafts, there is the complete property for an object corresponding an img element, as per the HTMLImageElement interface. The definition of the complete property basically means that the value is true when the browser has completely received the image (though there are some nuances here). As this is to be controlled by the browser, reflecting the loading status, it is natural that the property is defined to be read-only.

This property is widely present browsers, but apparently in a broken way: if you have an img element that refers to a nonexistent resource (404 Not Found), then Chrome and Firefox indicate the property as having the value true (IE gets things right here: false). So the property is not of much use for the time being.

Setting an attribute in HTML has no effect on this. HTML attribute and element object properties correspond to each other only when a correspondence has been defined.



回答3:

It is used to check if the image has finished loading.

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

returns true if has finished loading, else false. However it is not used as an attribute like in your example.



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!