Changing propety after loading all images

images ajax check load all images

[shelter]

I have a table with 9 images. After clicking a button all images change to new one's. I want to lower opacity while loading. I tried img.complete. but if the old picture is still there it will return true.

Then I tried to check te src property against the old propety && img completed. The code freezed. (so if newpic!= oldpic && complete == true)

After that i tried to load te images in a image object (new Image()) and check the complete propety. Did not work.

It looks like the imges were loaded but it takes some time to src them.

So in short: How do i check if all images have the new URI asigned, are loaded and are shown after changing them with src propety and if so perform code

all solutions send there true flag to soon (code executed before all new pictures where shown)

I could show code but i have tried so many way's. It always looked something like this:

function rewritemap(){

var image01 = new Image();
var image02 = new Image();
(...)
image01.src ="curacao-"+zoom+"_r"+ypos+"_c"+xpos+".jpg";
image02.src ="curacao-"+zoom+"_r"+ypos+"_c"+(xpos+1)+".jpg";
(...)
document.all("1").src = image01.src;
document.all("2").src = image02.src;
{...}
do{
...somecode
}
while(!image01.complete &&!image02.complete (...)

...code after loading

}

[daveVk]

How about using an onload handler on the images? like

document.all("1").onload = ...

[Achernar]

Attach "onload" and "onerror" events to each image. Then put the relevant code to remove opacity in these functions.

[shelter]

That worked fine after putting it in the IMG tag. Thanks