How to tell if an image is loaded...

[Skiracer901]

Does anyone know how to tell if an image is loaded? Thanks :)

[Khalid Ali]

Once an image is loaded you can view it on the web page..:D

[Skiracer901]

I mean how to tell if the image is loaded in javascript! I want to make a script that changes the image if it didn't load properly.

[pyro]

How about something like this:

var img = new Image();
img.src = "http://www.yourdomain.com/images/img.png";
img.onerror = function () {
//swap the image
}

[James Tripp]

There is an attribute 'complete' on Image() objects.


var img = new Image();
img.src = "http://www.yourdomain.com/images/img.png";

....

if ( img.complete ) {
//image has been downloaded now
} else {
//image has not been downloaded
}

[ZeroKilled]

the property complete is propietary of msie only and doesn't work on firefox. using the attribute complete isn't recommended.

[James Tripp]

Worked fine for me in FireFox, But not W3C Internet Standard

Looks like w3schools has done some testing on that as well

http://www.w3schools.com/htmldom/dom_obj_image.asp