Detecting "image loaded successfully"

[SlimShady]

I have a page with content.
Upon a certain action, two images get updated/replaced.
Because the images are on another server, it sometimes takes a couple of seconds.
* I would like to block specific actions (click on a button/other image) UNTIL the images are loaded.
* How do I detect when the images are done loading?
Something like readyState, complete, or something?
Any advice?

Thanks in advance.

[Ryan Fait]

You need to create a loop and check for

Code: Select all

// Declare the image
image = new Image;
image.src = "image.jpg";
// Use a loop with the following code in it
if (image.complete) {
    alert("The image is completely loaded");
}

[spinal007]

Back in my rule breaking days when standards were as important to me as an underwater hair drier, I used to use the 'onload' property on the image tag.

ie.:
<img src="/img.gif" onload="alert('Image loaded: '+this.src);"/>

[snow]

hehe, are you distancing yourself from that advice then spinal?

[Ryan Fait]

Haha, I think I used that method first, but image.complete works if the image is cached as well. Onload will not work twice.

[spinal007]

Originally Posted by snow

hehe, are you distancing yourself from that advice then spinal?

Damn right! LOL

I would use the technique Ryan showed above, and inorder to 'disable' the functionality, I'd add a div overlay to cover the entire screen.