I am developing a website where I have about 40 200K images to load and I got tiny squares in the bottom that when you mouseover them, the image viewer changes to the corresponding of this 200K images... so what i want to do is to load the entire page, and when that is done, start loading these images one by one.. and when each one of these loads, inmediately display the little square link that displays it (so that i would never have the problem that a user mouses over a square that displays an image that is not yet loaded) and since the little squares are one next to the other, it would slightly simmulate the effect of a loading bar..

I don't know much about javascript so this is what I came up with:

// I call this function from body onload=""
/* the parameter imgArray is an array that has the name of a product
and the function show_something(tvalue) simply changes style to display:block

function createImages(imgArray) {
var objArray = new Array();
var tvalue = 0;

for(i=0;i<imgArray.length;i++) {
// I used a loop since there are about 40-50 images
obj = objArray[i];
obj = new Image();
tvalue = imgArray[i];
obj.src = "_images/products/" + tvalue + ".png";
obj.onload = show_something(tvalue);

In firefox and chrome it works halfway.. the page loads, then the images start loading but the little squares get displayed all at once, not one by one when each corresponding image is loaded.. and in my beloved internet explorer, only one little square loads I already spent hours trying to solve this, I need help!

Thank you!