Ordered Events (JS)

[k9calamity]

Hello,

I am making a web gallery for myself.. This gallery needs to be able to preload its images for obvious reasons.. My idea was to have the thumbnails start out at 50% opacity, then when their respective image is loaded, it would become more opaque..

Right now, my preloading/opacity js goes like this:



pre1 = new Image();
pre1.src = "../bitmap/photo/large/jordanperr-1.jpg";
document.getElementById("t1").className = "thumbo";
pre2 = new Image();
pre2.src = "../bitmap/photo/large/jordanperr-2.jpg";
document.getElementById("t2").className = "thumbo2";
pre3 = new Image();
pre3.src = "../bitmap/photo/large/jordanperr-3.jpg";
document.getElementById("t3").className = "thumbo2";


The preloading works fine, so does the opacity! The problem is the timing!
The browser seems to just turn all of the images opaque the second this JS is called.. It doesn't wait for each image to preload like I thought it would..

Is there a way to do what I am trying to do?
The website is jordanperr.com/photo.html (http://jordanperr.com/photo) (its a shared server, so be gentle :D)

Thanks-
-Jordan