Altering 6 images then preloading but the images are being pre loaded before they are altered.

Question

I have 3 images of a horse/knight running. I am alternating them to make it look like its running. I am using GD to alter the colors of the knight/horse for the specific users chacter. I alter the images color then preload the 3 images. but by the time my program has altered the images they have already been preloaded. so i have to load the page twice for the correct colors of the knight.horse to apear. How do i fix this?

THE CODE is in the header. The function loadImage takes the base image and changes the color and saves it in the pic/#.gif file location. then the images are preloaded and a time is added on to the end so a new image is loaded and not a the image in the cache.

loadImage('pic/4.gif','pic/knightcolor0.gif',"1")

loadImage('pic/7.gif','pic/knightcolor0b.gif',"2")
loadImage('pic/5.gif','pic/knightcolor1.gif',"")
loadImage('pic/6.gif','pic/knightcolor2.gif',"")
loadImage('pic/8.gif','pic/knightcolor1R.gif',"")
loadImage('pic/9.gif','pic/knightcolor2R.gif',"")


img1 = new Image();
img1.src = "pic/4.gif?t="+new Date().getTime()
img2 = new Image();
img2.src =  "pic/5.gif?t="+new Date().getTime()
img3 = new Image();
img3.src =  "pic/6.gif?t="+new Date().getTime()
img4 = new Image();
img4.src = "pic/7.gif?t="+new Date().getTime()
img5 = new Image();
img5.src =  "pic/8.gif?t="+new Date().getTime()
img6 = new Image();
img6.src =  "pic/9.gif?t="+new Date().getTime()

pls help Ive tried a lot of things to fix this been working on it for a week now and cant figure it out ughhhhhh!

Answer 1

Preloading won't do you any good if it's calling an image that you don't want yet. If you set up the preload as a callback to the loadImage function, it won't execute until the right image is available.

Alternatively, could you narrow the choices of color? It's not inconceivable, in a situation like this, to have those images already prepared for use.