JavaScript image preloading

One of websites that I'm currently working on displays two JavaScript slide shows. If and when all images are loaded, then the website looks fine, but if not, slide shows look really messy; I need to resolve this problem.

I believe JavaScript image preloading is the solution to this problem, but I already preload images like the following:

var logoImage = new Array();
for (var i = 0; i < 11; i++)
{
	logoImage[i] = new Image();
}
logoImage[0].src="images/logo.jpg";
logoImage[1].src="images/logo.jpg";
logoImage[2].src="images/logo.jpg";
logoImage[3].src="images/logo.jpg";
logoImage[4].src="images/logo.jpg";
logoImage[5].src="images/logo1.jpg";
logoImage[6].src="images/logo2.jpg";
logoImage[7].src="images/logo3.jpg";
logoImage[8].src="images/logo4.jpg";
logoImage[9].src="images/logo5.jpg";
logoImage[10].src="images/logo6.jpg";

Code (markup):

(Yeah, I know, the code looks very messy, but I just want this to work rather than to write an elegant code.)

What am I missing? What can I do to ... get this JavaScript image preloading work ...???

(BTW, the following is the test site: http://www.cre8iveonline.com/jewelry/index.htm )

 

Do you have that preloading code in a function and call it via onload from the body tag?

See here what I mean.
http://articles.techrepublic.com.com/5100-22-5214317.html

 

You need to populate the array before you loop through it:

var logoImage = new Array();
logoImage[0].src="images/logo.jpg";
logoImage[1].src="images/logo.jpg";
logoImage[2].src="images/logo.jpg";
logoImage[3].src="images/logo.jpg";
logoImage[4].src="images/logo.jpg";
logoImage[5].src="images/logo1.jpg";
logoImage[6].src="images/logo2.jpg";
logoImage[7].src="images/logo3.jpg";
logoImage[8].src="images/logo4.jpg";
logoImage[9].src="images/logo5.jpg";
logoImage[10].src="images/logo6.jpg";

for (var i = 0; i < 11; i++)
{
logoImage = new Image();
}


I moved the code in red. In the code you posted, you're looping through an empty array, and then you add the items after the preloading loop has already completed.