Graphic load problem

Some graphics are only used in a not so often used javascript based menu.

Because the menu is javascript based, all the graphics are only loaded, when the menu is opened.

This looks not good.

So I thought to load it with the usual var x new Image;x.src='button/x.png';

This reduces the load speed of the other images, because not are 12 images more underway from the server to the client.

So I thought to load this graphics a little bit later.

I create first pre0, pre1.... pre20

dw='';
for(i=0;i<20;i++){dw+='var pre'+i+'=new Image();'}
document.write('<scr'+'ipt>'+dw+'</script>');

Than I load the buttons with setTimeput

url='button/a.jpg';
c="init_button_pre('"+url+"')";
setTimeout(c,2000);

and later in the script

ibr=0;
function init_button_pre(u){eval('pre'+ibr+'.src="'+u+'"');ibr++}

When I load the page and type in the address line

javascript:alert(pre0.src)

The URL is correct shown in the alert box

But when I activate the javascript menu, it seems like the graphic is not loaded, it takes some times that the graphic is loaded.

I want that some graphics are loaded later