Alain: wird bei new Image() automatisch vorgeladen?

Beitrag lesen

hi,

Doch ich habe dein Problem verstanden, nur tut dein Skript in dem Falle nichts anderes als diese Bar anzeigen. Da complete ja beim aufruf immer false ist.

false-> nur wenn od. solange das bild nicht im cache ist...

Das Skript hört nie mehr auf.

das stimmt,wenn ein bild nicht mehr da ist...aber dann bleibt,der balken einfach stehen,man kann aber trotzdem in die webseite klicken.
Bei twb's version kann ich nur mit NS7 od. Mozilla die seite sehen im IE ist schluss.

Wenn du statdessen das machst:
(img[i].complete)? dispbars() : dispbars();

Brauchst du den ganzen Schmoder nicht, da du dann ganz einfach nur die Schleife durchlaufen lassen kannst und fertig.

ja das weiss ich inzwischen.

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?

Du kannst das was du willst mit onload wesentlich sinnvoller machen.
In etwa so:

geht nicht,naja fast nicht,man sieht nur den balken kurz und dann is er wech-> ich möchte aber den balken sehen wie er sich jenach verbindungsgeschw. langsam lädt synchron zu den geladenen bildern,was ohne setTimeout leider nicht geht.Ich würds ja gern so machen wie Du vorschlägst,aber dat geht nidde!
So,Du kannst mein aktuelles script mal testen,hab da auch etwas geändert(die timeouts und vars),damit Du siehst was GENAU ich meine und sag mir nicht es ginge ohne setTimeout. ;-)
Hier der code nochmal:
<script type="text/javascript">
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;
}
cplayer(done,0,0,barheight,0);
window.onresize=setpos;
setpos();
for(i=0;i<image.length;i++){
img[i]=new Image();
img[i].src=image[i];
setTimeout('checkload('+i+')' ,i*200);//etwas mehr zeit gegeben
}
function setpos(){
var ww=(IE)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
outer.moveTo(x,ypos);
outer.visibility="show";
}
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)setTimeout('hidebar()', 300);
}
function checkload(i){
(img[i].complete)? dispbar(): setTimeout('checkload('+i+')' ,100);
cent=Math.round(count/image.length*100);
status=''+img[i].complete+'Wait...Images loading...'+cent+'%';
//in der statuszeile siehst Du im IE den wert von img[i].complete
}
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;
layer.clip.right=cr;
layer.clip.left=cl;
}
if(IE||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
</script>
//im html header gleich nach <meta http-equiv=...einfügen
Gruss
Alain