Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML img attribute "complete"

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" /> 
like image 293
user1323246 Avatar asked Oct 02 '12 07:10

user1323246


People also ask

How do you show image only when it is completely loaded?

You can use the complete property to check if the image has finished loading. However, I think there are other issues with your code, mainly you are repeatedly loading the same image. Instead, you should load it only once and then check the complete property in an interval.

What is Srcset in IMG tag?

srcset defines the set of images we will allow the browser to choose between, and what size each image is. Each set of image information is separated from the previous one by a comma.

What are the 2 attributes of IMG tag?

The img element has two required attributes: src : The source location (URL) of the image file. alt : The alternate text. This is used to describe the image for someone who cannot see it because they are either using a screen reader or the image src is missing.

How can we detect an image been fully loaded in the browser?

The image is considered completely loaded if any of the following are true: Neither the src nor the srcset attribute is specified. The srcset attribute is absent and the src attribute, while specified, is the empty string ( "" ). The image resource has been fully fetched and has been queued for rendering/compositing.


2 Answers

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.

like image 130
Jukka K. Korpela Avatar answered Sep 22 '22 07:09

Jukka K. Korpela


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");
});
like image 33
alex Avatar answered Sep 20 '22 07:09

alex