PDA

View Full Version : Preload Images - Progress Bar



hartool
03-19-2008, 09:22 PM
Hello,

On my site http://www.wilhelminastraat.info I use some 100 images for
3 motion galleries and 3 mouse-over maps. I have now added a pre-load and a progress bar. However, the images still load normally (as shown in the browser progress bar) and only then the progress bar is shown on the page and it looks like it is then loading the same images again. Would it be possible to show my browser bar directly when the page is loading instead of (or together with) the browser progress bar ?

The code in the head section is:

<script language="javascript" src="progressbar2.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>


the progressbar2.js code is:

// 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(
'http://www.wilhelminastraat.info/fotos/entree1x.jpg' ,
'http://www.wilhelminastraat.info/fotos/gang1x.jpg' ,
'http://www.wilhelminastraat.info/fotos/kaart.jpg' ,
'http://www.wilhelminastraat.info/fotos/kantoorachter1x.jpg' ,
'http://www.wilhelminastraat.info/fotos/kantoorvoor1x.jpg' ,
'http://www.wilhelminastraat.info/fotos/kantoorvoor1z.jpg' ,
'http://www.wilhelminastraat.info/fotos/keuken1x.jpg' ,
'http://www.wilhelminastraat.info/fotos/parterre.jpg' ,
'http://www.wilhelminastraat.info/fotos/plan1y.jpg' ,
'http://www.wilhelminastraat.info/fotos/serre1x.jpg' ,
'http://www.wilhelminastraat.info/fotos/toilet1x.jpg' ,
'http://www.wilhelminastraat.info/fotos/trap1x.jpg' ,
'http://www.wilhelminastraat.info/fotos/tuin01z.jpg' ,
'http://www.wilhelminastraat.info/fotos/tuin02z.jpg' ,
'http://www.wilhelminastraat.info/fotos/tuin03z.jpg' ,
'http://www.wilhelminastraat.info/fotos/tussendeur1z.jpg' ,
'http://www.wilhelminastraat.info/fotos/wijkxx.jpg' ,
'http://www.wilhelminastraat.info/oost/raaks2.gif' ,
'http://www.wilhelminastraat.info/oost/wilhelminastraat1.gif' ,
'http://www.wilhelminastraat.info/oost/wilhelminastraat3.gif' ,
'http://www.wilhelminastraat.info/oost/wilhelminastraat5.gif' ,
'http://www.wilhelminastraat.info/oost/wilhelminastraat7.gif' ,
'http://www.wilhelminastraat.info/oost/wilhelminastraat9.gif' ,
'http://www.wilhelminastraat.info/oost/wilhelminastraat11.gif' ,
'http://www.wilhelminastraat.info/oost/wilhelminastraat13.gif' ,
'http://www.wilhelminastraat.info/oost/wilsonsplein.gif' ,
'http://www.wilhelminastraat.info/fotos/huis.jpg');


var yposition=150; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='red' ; // PROGRESS BAR COLOR
var unloadedcolor='white'; // BGCOLOR OF UNLOADED AREA
var barheight=45; // 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;z-index:100;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="2" face="sans-serif">Even Geduld a.u.b. 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="2" face="sans-serif">Even Geduld a.u.b. 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;



Hope someone can help me

Frank

Felix Riesterer
03-20-2008, 08:29 AM
Greetings from Germany!

Why on earth do you still use scripts that check for NS4???

My advice: Try to rewrite the script and make it one big object or find a more DOM compliant version! This code is a big mess to maintain or to bugfix!

Felix Riesterer.