click image then preload.

[matrix07]

hi there i have downloaded a preloader and it works fine, but I would like to modify it. Right now when you enter the page the progress bar shows right away and then loads the images then it redirects. I want it where the bar is hidden, then when a image is clicked, then the bar shows and starts preloading. I don't where to modify this code.
I'm new to Javascript. There is a window.load at the bottom of the script. Can someone take a look. Thanks so much. This is only some of the code, I'd left out the imagesArrays.




// THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE IMAGES ARE DONE LOADING.
// IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({})
// BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE. PRESENTLY, IT IS SET TO
// DO NOTHING, BUT CAN BE CHANGED EASILY. TO CAUSE A REDIRECT, INSERT THE FOLLOWING
// LINE IN BETWEEN THE CURLY BRACES:
// document.location.href="

http://www.redirect_page.html";

// JUST CHANGE THE ACTUAL PAGE IT "POINTS" TO.

var action=function()
{
//document.location.href="index.asp";
}

//*****************************************************//
//******** NO NEED TO EDIT BEYOND THIS POINT ********//
//*****************************************************//

var NS4 = (document.layers)? true : false;
var IE4 = (document.all)? true : false;
var blocksize=(barwidth-2)/(imagenames.length);
barheight=Math.max(barheight,4);
var loaded=0;
var perouter=null;
var perdone=null;
var images=new Array();
var txt='';
if(NS4){
txt+='<table cellspacing=0 cellpadding=0 border=0><tr><td>';
txt+='<ilayer name=&quot;perouter&quot; visibility=&quot;hide&quot; height=&quot;'+barheight+'&quot; width=&quot;'+barwidth+'&quot;>';
txt+='<layer width=&quot;'+barwidth+'&quot; height=&quot;'+barheight+'&quot; bgcolor=&quot;'+bordercolor+'&quot; top=&quot;0&quot; left=&quot;0&quot;></layer>';
txt+='<layer width=&quot;'+(barwidth-2)+'&quot; height=&quot;'+(barheight-2)+'&quot; bgcolor=&quot;'+unloadedcolor+'&quot; top=&quot;1&quot; left=&quot;1&quot;></layer>';
txt+='<layer name=&quot;perdone&quot; width=&quot;'+(barwidth-2)+'&quot; height=&quot;'+(barheight-2)+'&quot; bgcolor=&quot;'+loadedcolor+'&quot; top=&quot;1&quot; left=&quot;1&quot;></layer>';
txt+='<layer width=&quot;'+(barwidth-2)+'&quot; height=&quot;'+(barheight-2)+'&quot; top=&quot;1&quot; left=&quot;1&quot;>';
txt+='<table cellpadding=0 cellspacing=0 border=0 width=&quot;'+(barwidth-2)+'&quot; height=&quot;'+(barheight-2)+'&quot;><tr><td align=&quot;center&quot; valign=&quot;middle&quot;>';
txt+='<span style=&quot;color:'+textColor+'; font-size:'+textSize+'; font-family:'+textFont+'&quot;>Preloading Images (Click To Skip)</span>';
txt+='</td></tr></table>';
txt+='</layer>';
txt+='</ilayer>';
txt+='</td></tr></table>';
}else{
txt+='<div id=&quot;perouter&quot; style=&quot;position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;&quot;>';
txt+='<div style=&quot;position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; font-size:1px;&quot;></div>';
txt+='<div id=&quot;perdone&quot; style=&quot;position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; font-size:1px;&quot;></div>';
txt+='<div style=&quot;position:absolute; top:2px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; color:'+textColor+'; font-size:'+textSize+'; font-family:'+textFont+'; text-align:center; cursor:default&quot;>Preloading Images (Click To Skip)</div>';
txt+='</div>';
}
document.write(txt);

//THIS FUNCTION BY MIKE HALL OF BRAINJAR.COM
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers;
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;
}
return null;
}

function loadimages(){
perouter=(NS4)?findlayer('perouter',document)IE4)?document.all['perouter']:document.getElementById('perouter');
perdone=(NS4)?perouter.document.layers['perdone']IE4)?document.all['perdone']:document.getElementById('perdone');
if(NS4)perouter.captureEvents(Event.MOUSEUP);
perouter.onmouseup=hideperouter;
clipEl(perdone,0,0,barheight-2,0);
if(NS4)perouter.visibility=&quot;show&quot;;
else perouter.style.visibility=&quot;visible&quot;;
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
if(images[n].complete)dispbars();
images[n].onload=dispbars;
images[n].onerror=dispbars;
}}

function dispbars(){
loaded++;
clipEl(perdone, 0, blocksize*loaded, barheight-2, 0);
if(loaded>=imagenames.length)setTimeout('hideperouter()', 800);
}

function hideperouter(){
if(NS4)perouter.visibility=&quot;hide&quot;;
else perouter.style.visibility=&quot;hidden&quot;;
action();
}

function clipEl(el, ct, cr, cb, cl){
if(NS4){
el.clip.left=cl;
el.clip.top=ct;
el.clip.right=cr;
el.clip.bottom=cb;
}else el.style.width=cr+'px';
}

//CREDIS TO DYNAMICDRIVE FOR THE FUNCTION BELOW
function get_cookie(Name) {
var search=Name+&quot;=&quot;;
var returnvalue=&quot;&quot;;
if(document.cookie.length>0){
offset=document.cookie.indexOf(search);
if(offset!=-1){
offset+=search.length;
end=document.cookie.indexOf(&quot;;&quot;,offset);
if(end==-1)end=document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset,end));
}}
return returnvalue;
}

window.onload=function(){
var okPB=false;
if (loadonce){
if(get_cookie(&quot;progB&quot==&quot;&quot{
okPB=true;
document.cookie=&quot;progB=yes&quot;;
}}
else okPB=true;
if(okPB)setTimeout('loadimages()',300);

 

[matrix07]

well, I'd tried this...and called the start() from my onclick event.
seems to be working...checked my cache and it's caching the images. Anyone see any problems with this way???

//ORIGINAL FUNCTION
//window.onload=function(){
//MY TEST FUNCTION
function start(){
var okPB=false;
if (loadonce){
if(get_cookie(&quot;progB&quot==&quot;&quot{
okPB=true;
document.cookie=&quot;progB=yes&quot;;
}}
else okPB=true;
if(okPB)setTimeout('loadimages()',300);
}