Aber abgesehen davon, dir ist klar, das ein Preloader einerseits die übertragene Datenmenge erheblich vergrößert und je nach Einstellung des Browsers der User die Bilder zweimal laden muss?
ich nehm mal an wenn javascript aktiviert ist oder nicht meinst Du das?
Nein, wenn dein Server falsch konfiguriert ist oder der IE.
So sieht das Skript mit onload aus,
var ypos=180; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadcol='aqua' ; // PROGRESS BAR COLOR
var unloadcol='blue'; // BGCOLOR OF UNLOADED AREA
var barheight=20; // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=400; // WIDTH OF THE BAR IN PIXELS
var bordcol='black'; // COLOR OF THE BORDER
var NS6 = (document.getElementById)? true : false;
var IE = (document.all)? true : false;
var NS4 = (document.layers)? true : false;
var image=new Array('Bild1.jpg','Bild2.jpg','Bild3.jpg');
var imgdone=false;
var size=barwidth/(image.length);
barheight=Math.max(barheight,20);
var count=0, outer, done, img=new Array();
var txt=(NS4)?'<layer name="outer" bgcolor="'+bordcol+'" visibility="hide">' : '<div id="outer" style="position:absolute; visibility:hidden; background-color:'+bordcol+'">';
txt+='<table border="0" cellspacing="0" cellpadding="0"><td width="'+barwidth+'" height="'+barheight+'" align="center">';
if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadcol+'" top="1" left="0">';
txt+='<table border="0" cellspacing="0" cellpadding="0"><td align="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadcol+'"><font color="'+loadcol+'" size="2" face="sans-serif">Loading...</font></td></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="done" width="100%" height="'+barheight+'" bgcolor="'+loadcol+'" top="1" left="0">' : '<div id="done" style="position:absolute; top:1px; left:0px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadcol+'; z-index:100">';
txt+='<table border="0" cellspacing="0" cellpadding="0"><td align="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadcol+'"><font color="'+unloadcol+'" size="2" face="sans-serif">Loading... </font></td></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>' ;
document.write(txt);
if(NS4){
outer=document.outer;
done=document.outer.document.layers[0].document.done;
}
if(NS6){
outer=document.getElementById('outer');
done=document.getElementById('done');
}
if(IE){
outer=document.all.outer;
done=document.all.done;
}
setpos();
cplayer(done,0,0,barheight,0);
for(i=0;i<image.length;i++)
{
img[i] = new Image();
img[i].onload = dispbar;
img[i].onerror = dispbar;
img[i].src=image[i] + '?' + Math.random();
// + '?' + Math.random(); ist nur zum testen, damit die Bilder auch wirklich neu geladen werden.
}
function setpos()
{
var ww=(IE)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4)
{
outer.moveTo(x,ypos);
outer.visibility="show";
}
else if(IE||NS6)
{
outer.style.left=x+'px';
outer.style.top=ypos+'px';
outer.style.visibility="visible";
}
}
function dispbar(){
count++;
cplayer(done, 0, size*count, barheight, 0);
if(count>=image.length) hidebar();
}
function hidebar(){
(NS4)? outer.visibility="hide" : outer.style.visibility="hidden";
imgdone=true;
status='loading complete!';
}
function cplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.top=ct +'px';
layer.clip.right=cr +'px';
layer.clip.left=cl +'px';
}
if(IE||NS6)layer.style.clip='rect('+ct+'px '+cr+'px '+cb+'px '+cl+'px)';
}
Struppi.