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.
Share Improve this question edited May 14, 2014 at 14:26 Kuf 17.8k7 gold badges68 silver badges91 bronze badges asked May 14, 2014 at 14:23 Anurag RatnaAnurag Ratna 3111 gold badge4 silver badges11 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
4 Answers
Reset to default 6This 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