javascript - Why Image 'complete' property always return true even if there is no src tag? - Stack Overflow

admin管理员组

文章数量:1241124

I just write

document.createElement("img")plete;//To check whether image is loaded or not

In Firefox,it returns true. In IE,it return false

OR

In a html page just create one image as:

 <!-- IMG tag with no SRC attribute. -->
<img id="noSrcImg" />

and In js check the plete property value :

var img = document.getElementById("noSrcImg");
imgplete

true for FF and false for IE

Can any one explain why this inconsistent behavior?

Is there any other better way to check whether image is loaded or not in DOM?

i tried with readyState attribute as well but its not available for IE11.

I just write

document.createElement("img").plete;//To check whether image is loaded or not

In Firefox,it returns true. In IE,it return false

OR

In a html page just create one image as:

 <!-- IMG tag with no SRC attribute. -->
<img id="noSrcImg" />

and In js check the plete property value :

var img = document.getElementById("noSrcImg");
img.plete

true for FF and false for IE

Can any one explain why this inconsistent behavior?

Is there any other better way to check whether image is loaded or not in DOM?

i tried with readyState attribute as well but its not available for IE11.

• javascript
• html
• image
• internet-explorer-11

Share Improve this question Follow edited May 14, 2014 at 14:26 Kuf 17.8k77 gold badges6868 silver badges9191 bronze badges asked May 14, 2014 at 14:23 Anurag RatnaAnurag Ratna 31111 gold badge44 silver badges1111 bronze badges 2

• use load/error events to verify wether image is loaded correctly – Yuriy Galanter Commented May 14, 2014 at 14:26
• some explanations here. stackoverflow./questions/8031886/… – volkinc Commented May 14, 2014 at 14:46

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

This is a bug in IE. According to the spec:

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

• The src attribute is omitted.
• The final task that is queued by the networking task source once the resource has been fetched has been queued.
• The img element is pletely available.
• The img element is broken.

Otherwise, the attribute must return false.

The best way to know the state of an image, is to handle the load and error events. If that isn't feasible, for whatever reason, to tell if an image has loaded successfully, check for img.plete && img.naturalWidth > 0. If true, the image has loaded successfully. Otherwise, the image is either still loading, or has failed to load - it's difficult to tell which because of IE's inconsistency.

Please try load

Also make sure the event handlers are defined BEFORE you assign src - on really fast networks, the src may load before the event handler if not defined first

var im = document.createElement("img");
im.onload=function() { alert(this.src+' loaded')} // assign before src
im.onerror=function() { alert(this.src+' failed')} // if necessary
im.src="someimage.jpg";

Returns a Boolean that is true if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no src value.

Empty img src like any href as a relative URL refers to a base URL, the URL of the document. @mplungjan posted good solution to actually check if and when it was loaded

本文标签： javascriptWhy Image 39complete39 property always return true even if there is no src tagStack Overflow