preload images on mouse click?

[Benjer]

Hello,

I've had to strip out all the images on our 'work' section as they were making the page weigh in close to 1MB!
I've been working on this Javascript

<script language=&quot;JavaScript&quot;>
function flip(name,src) {
if (navigator.appName == &quot;Microsoft Internet Explorer&quot {
document.all.wait.style.visibility=&quot;visible&quot;;
}
else {
document.layers[&quot;wait&quot;].visibility = &quot;visible&quot;;
}
swapImage='images/clients/'+src
if (document.images){
document.images[name].src = swapImage;
imageTimeout = setTimeout('loadTest(name)',1000);
}
}
function loadTest(name){
if (document.images){
document.images[name].onLoad=showImage();
}
}
function showImage() {
//remove this alert when fixed....
alert(&quot;loaded&quot;
if (navigator.appName == &quot;Microsoft Internet Explorer&quot {
document.all.wait.style.visibility=&quot;hidden&quot;;
}
else {
document.layers[&quot;wait&quot;].visibility = &quot;hidden&quot;;
}
}
</script>
I inserted a timeout to see wether that would help, as before the onload would trigger instantly. It basically should show the 'wait' layer untill the image is loaded. Any ideas on how i can overcome this problem much appreciated.
Benjer