javascript - How exactly does an image element's `complete` property work? - Stack Overflow

admin管理员组

文章数量:1289986

I have ran into a bit of a problem with my understanding of the plete property.

I assumed plete would be true if the image has been downloaded and decoded correctly.

MDN says...

True if the browser has fetched the image, and it is in a supported image type that was decoded without errors.

So, I assumed that checking an image's plete property before its load event had fired would return false (the image has not been fetched). When isolating this in jsFiddle, I kept getting true when checking the property inside a script element just before the closing </body> tag.

I also experimented with changing the src attribute of the image and then immediately checking its plete property. I can see in the browser the plete is ing back as true even before the image has downloaded (I am looking at its progress via the Net panel in Firebug).

Is the behaviour I am expecting correct? Is there a way to get this to work as I expect?

Currently testing in Firefox 7.0.1. This may be a Firefox bug, but only have this other question as evidence.

I have ran into a bit of a problem with my understanding of the plete property.

I assumed plete would be true if the image has been downloaded and decoded correctly.

MDN says...

True if the browser has fetched the image, and it is in a supported image type that was decoded without errors.

So, I assumed that checking an image's plete property before its load event had fired would return false (the image has not been fetched). When isolating this in jsFiddle, I kept getting true when checking the property inside a script element just before the closing </body> tag.

I also experimented with changing the src attribute of the image and then immediately checking its plete property. I can see in the browser the plete is ing back as true even before the image has downloaded (I am looking at its progress via the Net panel in Firebug).

Is the behaviour I am expecting correct? Is there a way to get this to work as I expect?

Currently testing in Firefox 7.0.1. This may be a Firefox bug, but only have this other question as evidence.

• javascript
• html
• dom

Share Improve this question Follow edited May 23, 2017 at 12:34 CommunityBot 111 silver badge asked Nov 7, 2011 at 1:32 alexalex 491k204204 gold badges889889 silver badges991991 bronze badges 2

• I found this: bugs.webkit/show_bug.cgi?id=28832 bug report filed for Safari - are you testing it on that? Your demo results in the expected false, false, true on Chrome 15, at least. – Ry- ♦ Commented Nov 7, 2011 at 1:39
• @minitech: I am testing in Firefox 7. – alex Commented Nov 7, 2011 at 1:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

From the w3c-docs

The IDL attribute plete must return true if any of the following conditions is true:

• The src attribute is omitted.
• The src attribute's value is the empty string.
• The final task that is queued by the networking task source once the resource has been fetched has been queued, but has not yet been run, and the img element is not in the broken state.
• The img element is pletely available.

Sounds like the result is correct. Assuming the inital image is cached, then the image already has been fetched.
It doesn't have any effect to the plete-property when you change the src(queue another task)

I played around a little bit and it looks as if you get the expected result when you remove the src-attribute before setting the new src. Demo: http://jsfiddle/doktormolle/UNEF7/

Explanation: When no src-attribute is present the state of the image turns to "broken"(the 3rd condition will not match anymore) and it will not be plete before the new ressource has been loaded.

I've got the answer, but you're not going to like it...

When the image in question is created with document.createElement, it works. See http://jsfiddle/minitech/nmuQ8/

I discovered that this works while creating a test to see if it doesn't work, so so far I don't have a way to tell if the replacement is actually necessary, unfortunately.

本文标签： javascriptHow exactly does an image element39s complete property workStack Overflow