SpeedFreak
11-02-2002, 02:05 AM
ok
on my site (www.blueshiftdesigns.clook.net) in the portfolio > graphics/websites sections i have a JS that preloads the images on the page - the only problem is is that it loads them after the rest of the page has loaded, by which time the user has already had to wait for the images to load normally.
How can i make it so that the preloading script runs before anything else on the page??
here is the code for that page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" src="progressbar.js">
/*
Preload Image (w/ progress bar) script II (By BGAudioDr@aol.com, http://www.bgaudiodr.iwarp.com/)
Script featured on Dynamicdrive.com
For full source, TOS, and 100's more DHTML scripts, visit http://www.dynamicdrive.com
*/
</script>
<style type="text/css">
<!--
.localfield {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9;
width: 150px;
bgcolor: #dddddd;
border: 1px solid #000000;
}
-->
</style>
</head>
<body bgcolor="e1e2e2" text="#000000" link="000066" vlink="000066" alink="000066" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="97%" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><strong><em><font color="#000066" size="4" face="Verdana, Arial, Helvetica, sans-serif"><img src="graphics.gif" width="330" height="50"></font></em></strong></td>
<td><div align="right"><a href="javascript:history.go(-1)"><img src="../../images/template/back.jpg" width="80" height="24" border="0"></a></div></td>
</tr>
</table>
<p><strong><font color="#000066" size="4" face="Verdana, Arial, Helvetica, sans-serif"><font color="#000000" size="2">Here
are some examples of our graphic design work:<br>
</font></font></strong><font color="#000000" size="4" face="Verdana, Arial, Helvetica, sans-serif"><font size="2">Please
note: all sample images are compressed - real images are full quality.</font></font></p>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td width="100%"><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">180
Youth Ministries</font></em></td>
<td><img src="180.jpg" width="400" height="88"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Don-Tech
(http://www.don-tech.net)</font></em></td>
<td><img src="dontech.jpg" width="400" height="77"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">It-Guyz
Logo</font></em></td>
<td><img src="it-guyz.jpg" width="400" height="67"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">It-
Guyz Review Graphic</font></em></td>
<td><img src="itgscore.jpg" width="224" height="100"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">S.O.D
(Servers on Demand)</font></em></td>
<td><img src="logo1.jpg" width="288" height="94"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">MailService</font></em></td>
<td><img src="mailservice_ms.jpg" width="400" height="80"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">UpTime</font></em></td>
<td><img src="uptime.jpg" width="400" height="100"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">VoiceRecognition
v1</font></em></td>
<td><img src="voicerecognition1.jpg" width="400" height="80"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">VoiceRecognition
v2</font></em></td>
<td><img src="voicerecognition2.jpg" width="400" height="72"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">VoiceRecognition
v3</font></em></td>
<td><img src="vr2extrude.jpg" width="400" height="72"></td>
</tr>
</table>
<p><br>
</p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
And here is the external JS file
// Progressbar - Version 2.0
// Author: Brian Gosselin of http://scriptasylum.com
// Featured on Dynamic Drive (http://www.dynamicdrive.com)
// PUT THE NAMES OF ALL YOUR IMAGES THAT NEED TO BE "CACHED" IN THE "imagenames" ARRAY.
// DONT FORGET THE COMMA BETWEEN EACH ENTRY, OR THE TICK MARKS AROUND EACH NAME.
// WHEN ALL THE IMAGES ARE DONE LOADING, THE "imagesdone" VARIABLE IS SET TO "TRUE"
var imagenames=new Array( '180.jpg' , 'dontech.jpg' , 'it-guyz.jpg' , 'itgscore.jpg' , 'logo1.jpg' , 'mailservice_ms.jpg' , 'uptime.jpg' , 'voicerecognition1.jpg' , 'voicerecognition2.jpg' , 'vr2extrude.jpg');
var yposition=100; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='#136CA5' ; // PROGRESS BAR COLOR
var unloadedcolor='white'; // BGCOLOR OF UNLOADED AREA
var barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=350; // WIDTH OF THE BAR IN PIXELS
var bordercolor='black'; // COLOR OF THE BORDER
//DO NOT EDIT BEYOND THIS POINT
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var imagesdone=false;
var blocksize=barwidth/(imagenames.length);
barheight=Math.max(barheight,25);
var loaded=0, perouter, perdone, images=new Array();
var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>';
document.write(txt);
function loadimages(){
if(NS4){
perouter=document.perouter;
perdone=document.perouter.document.layers[0].document.perdone;
}
if(NS6){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
}
if(IE4){
perouter=document.all.perouter;
perdone=document.all.perdone;
}
cliplayer(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
setTimeout('checkload('+n+')' ,n*100);
}}
function setouterpos(){
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
perouter.moveTo(x,yposition);
perouter.visibility="show";
}
if(IE4||NS6){
perouter.style.left=x+'px';
perouter.style.top=yposition+'px';
perouter.style.visibility="visible";
}}
function dispbars(){
loaded++;
cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
if(loaded>=imagenames.length)setTimeout('hideperouter()', 800);
}
function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
}
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
}
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.left=cl;
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
window.onload=loadimages;
Thanks a lot
PS. Forgive the large amounts of code - i didnt know what to include :)
on my site (www.blueshiftdesigns.clook.net) in the portfolio > graphics/websites sections i have a JS that preloads the images on the page - the only problem is is that it loads them after the rest of the page has loaded, by which time the user has already had to wait for the images to load normally.
How can i make it so that the preloading script runs before anything else on the page??
here is the code for that page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" src="progressbar.js">
/*
Preload Image (w/ progress bar) script II (By BGAudioDr@aol.com, http://www.bgaudiodr.iwarp.com/)
Script featured on Dynamicdrive.com
For full source, TOS, and 100's more DHTML scripts, visit http://www.dynamicdrive.com
*/
</script>
<style type="text/css">
<!--
.localfield {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9;
width: 150px;
bgcolor: #dddddd;
border: 1px solid #000000;
}
-->
</style>
</head>
<body bgcolor="e1e2e2" text="#000000" link="000066" vlink="000066" alink="000066" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="97%" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><strong><em><font color="#000066" size="4" face="Verdana, Arial, Helvetica, sans-serif"><img src="graphics.gif" width="330" height="50"></font></em></strong></td>
<td><div align="right"><a href="javascript:history.go(-1)"><img src="../../images/template/back.jpg" width="80" height="24" border="0"></a></div></td>
</tr>
</table>
<p><strong><font color="#000066" size="4" face="Verdana, Arial, Helvetica, sans-serif"><font color="#000000" size="2">Here
are some examples of our graphic design work:<br>
</font></font></strong><font color="#000000" size="4" face="Verdana, Arial, Helvetica, sans-serif"><font size="2">Please
note: all sample images are compressed - real images are full quality.</font></font></p>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td width="100%"><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">180
Youth Ministries</font></em></td>
<td><img src="180.jpg" width="400" height="88"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Don-Tech
(http://www.don-tech.net)</font></em></td>
<td><img src="dontech.jpg" width="400" height="77"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">It-Guyz
Logo</font></em></td>
<td><img src="it-guyz.jpg" width="400" height="67"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">It-
Guyz Review Graphic</font></em></td>
<td><img src="itgscore.jpg" width="224" height="100"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">S.O.D
(Servers on Demand)</font></em></td>
<td><img src="logo1.jpg" width="288" height="94"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">MailService</font></em></td>
<td><img src="mailservice_ms.jpg" width="400" height="80"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">UpTime</font></em></td>
<td><img src="uptime.jpg" width="400" height="100"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">VoiceRecognition
v1</font></em></td>
<td><img src="voicerecognition1.jpg" width="400" height="80"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">VoiceRecognition
v2</font></em></td>
<td><img src="voicerecognition2.jpg" width="400" height="72"></td>
</tr>
<tr>
<td><em><font size="2" face="Verdana, Arial, Helvetica, sans-serif">VoiceRecognition
v3</font></em></td>
<td><img src="vr2extrude.jpg" width="400" height="72"></td>
</tr>
</table>
<p><br>
</p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
And here is the external JS file
// Progressbar - Version 2.0
// Author: Brian Gosselin of http://scriptasylum.com
// Featured on Dynamic Drive (http://www.dynamicdrive.com)
// PUT THE NAMES OF ALL YOUR IMAGES THAT NEED TO BE "CACHED" IN THE "imagenames" ARRAY.
// DONT FORGET THE COMMA BETWEEN EACH ENTRY, OR THE TICK MARKS AROUND EACH NAME.
// WHEN ALL THE IMAGES ARE DONE LOADING, THE "imagesdone" VARIABLE IS SET TO "TRUE"
var imagenames=new Array( '180.jpg' , 'dontech.jpg' , 'it-guyz.jpg' , 'itgscore.jpg' , 'logo1.jpg' , 'mailservice_ms.jpg' , 'uptime.jpg' , 'voicerecognition1.jpg' , 'voicerecognition2.jpg' , 'vr2extrude.jpg');
var yposition=100; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='#136CA5' ; // PROGRESS BAR COLOR
var unloadedcolor='white'; // BGCOLOR OF UNLOADED AREA
var barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=350; // WIDTH OF THE BAR IN PIXELS
var bordercolor='black'; // COLOR OF THE BORDER
//DO NOT EDIT BEYOND THIS POINT
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var imagesdone=false;
var blocksize=barwidth/(imagenames.length);
barheight=Math.max(barheight,25);
var loaded=0, perouter, perdone, images=new Array();
var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>';
document.write(txt);
function loadimages(){
if(NS4){
perouter=document.perouter;
perdone=document.perouter.document.layers[0].document.perdone;
}
if(NS6){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
}
if(IE4){
perouter=document.all.perouter;
perdone=document.all.perdone;
}
cliplayer(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
setTimeout('checkload('+n+')' ,n*100);
}}
function setouterpos(){
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
perouter.moveTo(x,yposition);
perouter.visibility="show";
}
if(IE4||NS6){
perouter.style.left=x+'px';
perouter.style.top=yposition+'px';
perouter.style.visibility="visible";
}}
function dispbars(){
loaded++;
cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
if(loaded>=imagenames.length)setTimeout('hideperouter()', 800);
}
function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
}
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
}
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.left=cl;
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
window.onload=loadimages;
Thanks a lot
PS. Forgive the large amounts of code - i didnt know what to include :)