Preloading images

[Yan Seiner]

We're about to roll out our new product after a year of work... (YAAY!)

And a big THANK YOU for everyone on this list who's helped me out.

We're down to the UI and look and feel issues now....

We load icons via javascript. The image names are contained in the html 
tags.  Javascript then scrolls through the icons as the user clicks on 
the button.

There is a long delay the first time the user clicks on a button.  I 
assume this is due to konq/js loading the images.  The icons themselves 
are tiny; < 1K jpg files, but the delay is very long, sometimes over 5 
seconds before the icons load up in response to a button click.

Once the icons are loaded the response is instant.

I've come across references that you can pre-load images using 
javascript but I've not been able to track down any examples that 
work...  I've not been able to get stuff like this 
http://www.pageresource.com/jscript/jpreload.htm to work since the html 
for the button contains the images I need to display....

Anyway, if anyone can shed any light on this I would be very grateful....

here's a sample button and the javascript that runs it....  I'd like to 
pre-load the dry and wet images.

<button tabindex=2 id='a2' ptype='button' imageList="/dry.png,/wet.png" 
wrap="false" valTarget='ha2' imageTarget='ia2'>

function buttonField(step, dir) {
    var image_array = activeElement.getAttribute('imageList').split(",");
    var newVal = (1 * 
document.getElementById(activeElement.getAttribute('valTarget')).value ) 
+ dir;
    if ( activeElement.getAttribute('wrap') == 'true' ) {
        if ( newVal >= image_array.length ) newVal = 0;
        else if ( newVal < 0 ) newVal = image_array.length - 1;
        }
    else {
        if ( newVal >= image_array.length ) newVal = image_array.length - 1;
        else if (newVal < 0) newVal = 0;
        }
//    document.getElementById("xidx").value = 
document.getElementById(activeElement.getAttribute('valTarget')).value;
    
document.getElementById(activeElement.getAttribute('valTarget')).value = 
newVal;
    
document.getElementById(activeElement.getAttribute('imageTarget')).src = 
image_array[newVal];
    return newVal;
    }