wird bei new Image() automatisch vorgeladen?

[Alain]

Hallo,
ich wollte mir sowas ähnliches wie ein preloader einbauen
für die mouseover bilder.
Nun stellt sich mir die frage,ob vorgaben wie

<script type="text/javascript">
normal4 = new Image();
normal4.src = "ind07.jpg";  /* exit-normal Grafik */
light4 = new Image();
light4.src = "ind07b.jpg"; /* exit-mouseover Garfik */

nochneandere function()
</script>

nicht bereits die onmouseover bilder vorladen?
Dann könnte ich mir das preload script

http://javascript.jstruebig.de/source/preloader.html
oder was ähnliches
http://home.arcor.de/struebig/js/mouse_over/index.html
sparen ;-)
Gruss
Alain

[twb]

Nun stellt sich mir die frage,ob vorgaben wie

<script type="text/javascript">
normal4 = new Image();
normal4.src = "ind07.jpg";  /* exit-normal Grafik */
light4 = new Image();
light4.src = "ind07b.jpg"; /* exit-mouseover Garfik */

nochneandere function()
</script>

nicht bereits die onmouseover bilder vorladen?

Meiner Erfahrung nach nicht. Für mein Webspiel http://www.mahjongg.li, dessen reibungsloses Funktionieren auf einen vollständigen Cache-Preload angewiesen ist, verwende ich deshalb sogar noch eine "verschärfte" Variante mit zwei separaten functions:

function preload()
{
count=0;
image=new Array ('bild1.jpg','bild2.gif','etcetera.gif');
picture=new Array(image.length);
for (i=0;i<image.length;i++)
{
picture[i]=new Image();
picture[i].onload=loadcheck;
picture[i].src=image[i];
}
}

function loadcheck()
{
count++;
if (count>0&&count<image.length)
{
display="So etwas wie loading...";
document.getElementById("Id").innerHTML=display;
}
else jetztkannbeginnenwasbeginnensoll();
}

Das hat, namentlich bei DOM-Sites, den grossen Vorteil, dass die Ausgabe der HTML-Elemente erst erfolgt, _nachdem_ alle Bilder in den Cache geladen worden sind (Beispiel s.o.).

Hilft das was? Herzlich, twb

[Alain]

hi,

Meiner Erfahrung nach nicht. Für mein Webspiel http://www.mahjongg.li, dessen reibungsloses Funktionieren auf einen vollständigen Cache-Preload angewiesen ist, verwende ich deshalb sogar noch eine "verschärfte" Variante mit zwei separaten functions:

Hilft das was? Herzlich, twb

hmmm,
ich habe es nun getestet.Habe all diese daten mal ins tmp verzeichniss gelegt und die html seite aufgerufen.
Nach meiner version,funktioniert der preload vollständig,wie ich sehe im cache-ordner,den ich vorher natürlich geleert hatte.
Die onmouseover bilder sind bereits vorhanden im cache,bevor ich mit der maus über die bilder gefahren bin,welche ersetzt werden von den onmouseover-bilder.Danke trotzdem für den tip.
Gruss
Alain

[twb]

Die onmouseover bilder sind bereits vorhanden im cache,bevor ich mit der maus über die bilder gefahren bin,welche ersetzt werden von den onmouseover-bilder.Danke trotzdem für den tip.

Gern geschehen, Alain. Und Deine Beobachtung ist natürlich richtig. Nur sind die Bilder in dem Augenblick, da der HTML-Inhalt angezeigt wird, noch nicht vollständig im Cache, sondern _werden erst noch_ geladen. Wenn's wenig Bilder sind, fällt das kaum ins Gewicht, und Deine Mausbewegung ist nicht schnell genug, um das Fehlen des Bildes anzuzeigen. Bei rund 100 Pics wie bei meinem Webspiel ist das was anderes, daher mein knochenharter Preload. Handelt es sich nur um einige wenige Bilder, dann reicht Deine wesentlich schlankere Methode vollauf.

Herzlich, twb

[Struppi]

picture[i]=new Image();
picture[i].onload=loadcheck;
picture[i].src=image[i];

Hier gibt es ein Problem mit dem IE.

Ich weiß nicht ob du es schon mal bemerkt hast, im IE kommt es bei solchen preloadern immer mal wieder zu hängern. er beeendet den preload nicht, drückt man dann F5 funktioniert dann scheinbar alles wieder.

In dem preloader von http://www.howtocreate.co.uk/jslibs/htmlhigh/imgpreld.html wird beschrieben woran das offensichtlich liegt:
/* Officially, if the image is already in cache, onload will not fire. It does in Internet Explorer. If this is Internet Explorer or due to some fast connection, the image has managed to load since the last line of code, then the onload function will be executed twice, doubling the image count. This will cause the new URL to be loaded before all images are cached. The onload function includes a check to see if this image has already triggered the onload function and if it has, it does not increase the count. */

seitdem funktioneren meine Preload skripte im IE (bisher) einwandfrei.

Struppi.

[twb]

picture[i]=new Image();
picture[i].onload=loadcheck;
picture[i].src=image[i];

Hier gibt es ein Problem mit dem IE.

Hab Dank für Deinen Hinweis, Struppi: Das hab' ich nicht gewusst. Und offensichtlich kam ich noch nie in den Genuss derart schneller Internetverbindungen, so dass keiner meiner IEs (5.0, 5.5, 6.0) versucht war, auf http://www.mahjongg.li eines der Bilder rascher zu laden als den Preloader auszuführen. Ich werd' mir das Problem mal zur Brust nehmen. Nochmals: Merciviumau, wie wir Berner sagen!

twb

[Struppi]

Hab Dank für Deinen Hinweis, Struppi: Das hab' ich nicht gewusst. Und offensichtlich kam ich noch nie in den Genuss derart schneller Internetverbindungen, so dass keiner meiner IEs (5.0, 5.5, 6.0) versucht war, auf http://www.mahjongg.li eines der Bilder rascher zu laden als den Preloader

Echt? auch nicht lokal?
Ich hab dieses Phänomen schon oft beobachtet (IE 4/ IE 6) und lange zeit keine Erlärung gefunden.

Struppi.

[twb]

Echt? auch nicht lokal?

Nicht mal lokal, nicht ein einziges Mal in drei Jahren. Kein Scherz. Ich war echt überrascht über den Inhalt Deines Postings. (Dessen Inhalt allerdings durchaus stringent war, wie ich gern zugebe.)

twb

[Alain]

hi twb,

Nicht mal lokal, nicht ein einziges Mal in drei Jahren. Kein Scherz. Ich war echt überrascht über den Inhalt Deines Postings. (Dessen Inhalt allerdings durchaus stringent war, wie ich gern zugebe.)

mir ist da an deinem script auch was aufgefallen:
Du benutzt nur document.getElementById ,was gewissen browser probleme bereiten dürfte bzw. deine seite erst gar nicht anzeigt.
Ich habe jetzt trotzdem auch mal nen loader erstellt für meine index seite,welches so ähnlich aussieht:
var ypos=180; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadcol='red';      // PROGRESS BAR COLOR
var unloadcol='blue';   // BGCOLOR OF UNLOADED AREA
var barheight=20;      // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 20)
var barwidth=200;     // WIDTH OF THE BAR IN PIXELS
var bordcol='black'; // COLOR OF THE BORDER

var NS4 = (document.layers)? true : false;
var IE = (document.all)? true : false;
var NS6 = (document.getElementById)? true : false;
var images=new Array
('vorladebilder.jpg',
'vorladebilder1.jpg',//exit
'vorladebilder2.jpg',//deutsch enter
'vorladebilder3.jpg',//englisch enter
'etc.jpg');
var imgdone=false;
var size=barwidth/(images.length);
barheight=Math.max(barheight,20);
var load=0, perouter, perdone, img=new Array();

//ab hier folgt der displaybalken
var txt=(NS4)?'<center><layer name="perouter" bgcolor="'+bordcol+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordcol+'">';
txt+='<table border="0" cellspacing="0" cellpadding="0"><tr><td width="'+barwidth+'" height="'+barheight+'" align="center">';
if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadcol+'" top="0" left="0">';
txt+='<table border="0" cellspacing="0" cellpadding="0"><tr><td align="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadcol+'"><font color="'+loadcol+'" size="2" face="sans-serif">Loading... </font></td></tr></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadcol+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadcol+'; z-index:100">';
txt+='<table border="0" cellspacing="0" cellpadding="0"><tr><td align="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadcol+'"><font color="'+unloadcol+'" size="2" face="sans-serif">Loading... </font></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(IE){
perouter=document.all.perouter;
perdone=document.all.perdone;
}
cliplayer(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for(n=0;n<images.length;n++){
img[n]=new Image();
img[n].src=images[n];
setTimeout('checkload('+n+')' ,n*60);
}}
function setouterpos(){
var ww=(IE)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
perouter.moveTo(x,ypos);
perouter.visibility="show";
}
if(IE||NS6){
perouter.style.left=x+'px';
perouter.style.top=ypos+'px';
perouter.style.visibility="visible";
}}
function dispbars(){
load++;
cliplayer(perdone, 0, size*load, barheight, 0);
if(load>=images.length)setTimeout('hideperouter()', 300);
}
function checkload(index){
(img[index].complete)? dispbars() : setTimeout('checkload('+index+')', 40);
status='Wait...images loading...';
}
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imgdone=true;
status='loading complete!';
}
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.left=cl;
layer.clip.top=ct;
layer.clip.right=cr;
}
if(IE||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}

das problem bei mir jetzt ist,ich würde gerne noch einen 0-100% anzeige drinnen haben beim loaden als nur den load balken.
Aber diese version sollte bei den meisten gängigen browser funktionieren.
Gruss
Alain

[Struppi]

mir ist da an deinem script auch was aufgefallen:
Du benutzt nur document.getElementById ,was gewissen browser probleme bereiten dürfte bzw. deine seite erst gar nicht anzeigt.

Nur 4'er Versionen.

function loadimages(){
for(n=0;n<images.length;n++){
img[n]=new Image();
img[n].src=images[n];
setTimeout('checkload('+n+')' ,n*60);

und genau das ist ziemlicher Mist, weil wenn das bild nicht existiert der Preloader nie fertig wird. Es gibt für diesen Zweck das onload (und evtl. das onerror) Event. Genau wie von twb auch benutzt, das ist sicher und funktioniert seit geraumer Zeit.

das problem bei mir jetzt ist,ich würde gerne noch einen 0-100% anzeige drinnen haben beim loaden als nur den load balken.
Aber diese version sollte bei den meisten gängigen browser funktionieren.

Bevor du versuchst es für so alte Versionen zum laufen zu bringen, würde ich erstmal die Version von twb einbauen.

Struppi.

[Alain]

hi Struppi,

function loadimages(){
for(n=0;n<images.length;n++){
img[n]=new Image();
img[n].src=images[n];
setTimeout('checkload('+n+')' ,n*60);

und genau das ist ziemlicher Mist, weil wenn das bild nicht existiert der Preloader nie fertig wird. Es gibt für diesen Zweck das onload (und evtl. das onerror) Event. Genau wie von twb auch benutzt, das ist sicher und funktioniert seit geraumer Zeit.

wieso ist das mist?
hast Du die function auch angesehen?
function checkload(i){
(img[i].complete)? dispbars() : hidebar();
status='Wait...Images loading...'+count+'0%';
}

wenn ein bild nicht existiert dann verschwindet die loadbar auch.

Bevor du versuchst es für so alte Versionen zum laufen zu bringen, würde ich erstmal die Version von twb einbauen.

hab ich versucht,aber es geht nicht weder das laden der bilder noch die loadbar,die niemals verschwindet.Habs auch mit
document.getElementById("screen").innerHTML=display; versucht meine jetztige version von twb sieht so
function preload()
{
var count=0;
var image=new Array
('ind04b.jpg',
'ind07b.jpg',//exit
'ind08b.jpg',//deutsch enter
'ind10b.jpg',//englisch enter
'ind12b.jpg',
'ind13b.jpg',
'ind16b.jpg',
'ind01.jpg',
'ind03.jpg',
'welcom.jpg');
img=new Array(image.length);
for (i=0;i<image.length;i++)
{
img[i]=new Image();
count++;
percent=Math.round(count/image.length*100);
if (count>0&&count<image.length)
{
display="<table cellspacing="0" cellpadding="0" style="position:absolute;top:1;left:0"><tr><td height="24" width=""+(percent*5.18)+"" style="background-color:blue">&nbsp;</td><td height="24" width=""+(100*5.18-percent*5.18)+"" style="background-color:blue">&nbsp;</td></tr></table><font style="font-family:Arial,sans-serif;font-size:14pt;white-space:nowrap;position:absolute;top:1;left:0">&nbsp;Loading...&nbsp;"+percent+"%</font>";
document.write(display);
}
img[i].src=image[i];
}
}

was auch nicht geht...
Gruss
Alain

[Struppi]

wieso ist das mist?
hast Du die function auch angesehen?
function checkload(i){
(img[i].complete)? dispbars() : hidebar();
status='Wait...Images loading...'+count+'0%';
}

wenn ein bild nicht existiert dann verschwindet die loadbar auch.

.complete wird in dem Falle nie true (und in manch anderen Fällen auch nicht, es ist keine besonders zuverlässige Eigenschaft).
Aber dann ist das Bild ja nicht geladen, wenn complete false ist, heißt das ja nicht, das das Bild nicht geladen werden kann, sondern das es noch nicht geladen wurde.

Bevor du versuchst es für so alte Versionen zum laufen zu bringen, würde ich erstmal die Version von twb einbauen.

hab ich versucht,aber es geht nicht weder das laden der bilder noch die loadbar,die niemals verschwindet.Habs auch mit
document.getElementById("screen").innerHTML=display; versucht meine jetztige version von twb sieht so

Das einzige worum es mit geht, ist, dass du mit onload oder onerror eindeutig feststellen kannst ob das Bild geladen wurde oder nicht. Auf meiner Seite hab ich ein Skript http://javascript.jstruebig.de/source/preloader.html das diese events nutzt.

Struppi.

[Alain]

hi Struppi,

.complete wird in dem Falle nie true (und in manch anderen Fällen auch nicht, es ist keine besonders zuverlässige Eigenschaft).
Aber dann ist das Bild ja nicht geladen, wenn complete false ist, heißt das ja nicht, das das Bild nicht geladen werden kann, sondern das es noch nicht geladen wurde.

man könnte doch in dem falle(bei false)die loadbar trotzdem verschwinden lassen mit einer function.
z.B.
function dispbars(){
count++;
cliplayer(perdone, 0, size*count, barheight, 0);
if(count>=image.length)setTimeout('hidebar()', 300);
}
function checkload(i){
(img[i].complete)? dispbars() : dispbars();
//anstatt (img[i].complete)? dispbars() : setTimeout('checkload('+i+')' ,80);
status='Wait...Images loading...'+i+'0%';
}
function hidebar(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imgdone=true;
status='loading complete!';
}

Das einzige worum es mit geht, ist, dass du mit onload oder onerror eindeutig feststellen kannst ob das Bild geladen wurde oder nicht. Auf meiner Seite hab ich ein Skript http://javascript.jstruebig.de/source/preloader.html das diese events nutzt.

Ja, nochmal,ich glaube Du hast mein problem nicht verstanden,
ich möchte eine loadbar dynamisch angezeigt haben auf dem display welches fährt,wie eine level anzeige bei einer stereoanlage,wenn möglich noch mit einer anzeige von 0-100%,die auch hochzählt in realtime,solange bilder geladen werden.
Und das geht nicht ohne setTimeout auch nicht auf twb's seite.
Mein script oben zeigt es genau so an,ich will kein alert popup,mit einer bestätigung.
Grüsse
Alain

[Struppi]

Ja, nochmal,ich glaube Du hast mein problem nicht verstanden,
ich möchte eine loadbar dynamisch angezeigt haben auf dem display welches fährt,wie eine level anzeige bei einer stereoanlage,wenn möglich noch mit einer anzeige von 0-100%,die auch hochzählt in realtime,solange bilder geladen werden.
Und das geht nicht ohne setTimeout auch nicht auf twb's seite.
Mein script oben zeigt es genau so an,ich will kein alert popup,mit einer bestätigung.

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.

Ich versuch mal dein Skript  zu erklären:
function loadimages(){
for(n=0;n<images.length;n++){
img[n]=new Image();
img[n].src=images[n];
setTimeout('checkload('+n+')' ,n*60);
}}

Die schleife wird images.length mal aufgerufen, dabei wird images.length der Timeout gesetzt, jeweils nach ca. 60 ms (Milliskeunden) n ist dabei vernachlässigbar.

d.h. nach ca. 60 ms wird das erste mal checkload(x) aufgerufen:
function checkload(index){
(img[index].complete)? dispbars() : setTimeout('checkload('+index+')', 40);
status='Wait...images loading...';
}

img[index].complete ist vermutlich false und wird nach 40 milisekunden wieder aufgerufen. Zwischenzeitlich dürfte eine Menge anderer Timeouts aus der ersten Funktion diese Funktion auch aufgerufen haben, so läuft jetzt das ganze ab, alle 40 ms wird diese Funktion images.length mal aufgerufen, da kann einiges zusammenkommen.

Gleichzeitig lädt der Browser die Bilder, wenn du (bzw. deine Besucher) Glück hast sind alle Bilder verfügbar und irgendwann tritt die Abruchbedingung ein (ich hab schon erlebt, das beim paralelen aufrufen von einer Funktion das nicht mehr richtig funktioniert hat) und alles ist in Ordnung.
Doch was ist, wenn grad der Server down ist? Oder ein Bild aus versehen gelöscht, umbenannt wurde?
Das Skript hört nie mehr auf.

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.

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?

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

In der Schleife:

for(n=0;n<images.length;n++){
img[n]=new Image();
img[n].onload = disbars; // ohne Klammer!
img[n].onerror = disbars; // ohne Klammer!
img[n].src=images[n];

Und die Funktion checkload kannste dir Schenken.

Struppi.

[Alain]

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

[Struppi]

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.

[Alain]

Hallo Struppi,

ich nehm mal an wenn javascript aktiviert ist oder nicht meinst Du das?

Nein, wenn dein Server falsch konfiguriert ist oder der IE.

wieso,
javascript hat doch mit dem server nichts am hut?!

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;
}

else if(NS6){                //geändert
outer=document.getElementById('outer');
done=document.getElementById('done');
}
else {
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; //was passiert da?

img[i].src=image[i] + '?' + Math.random();
// + '?' + Math.random();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);
prozent=Math.round(count/image.length*100);
status='Wait...Images loading...'+prozent+'%';
if(count>=image.length)hidebar();
}
//wie kann ich zusätzlich prozent in der loadbar anzeigen lassen,als nur in der statuszeile?Kann den nicht einfach oben(bei document.write...) einfügen.

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+')';
}//ohne pixel gehts...

das script scheint tatsächlich so zu funktionieren,so wars auch erwünscht,obwohl bei einer schnellen verbindung sieht man die loadbar kaum oder nur kurz aufblitzen.Ich habe mit einem proxy eine langsame verbindung simuliert und die loadbar lädt sich tatsächlich synchron zum ladestatus,was mir auch so gut gefällt.
Grüsse
Alain

[Struppi]

ich nehm mal an wenn javascript aktiviert ist oder nicht meinst Du das?

Nein, wenn dein Server falsch konfiguriert ist oder der IE.

wieso,
javascript hat doch mit dem server nichts am hut?!

Sag ich auch nicht.

Wenn der Server einen falschen Header bei den Bildern sendet kann es es sein, dass du die Bilder erst mit dem skript lädst und dann auf der Seite wo du sie benutzen willst nochmal.

Oder wenn der User seinen Cache ausgeschaltet hat.

img[i].onerror = dispbar; //was passiert da?

Du weisst dem Handler eine Funktionsreferenz zu. Im Falle des Auftretens des events wird diese aufgerufen. Hier in dem Falle, wenn das bild nicht geladen werden kann.

das script scheint tatsächlich so zu funktionieren,so wars auch erwünscht,obwohl bei einer schnellen verbindung sieht man die loadbar kaum oder nur kurz aufblitzen.Ich habe mit einem proxy eine langsame verbindung simuliert und die loadbar lädt sich tatsächlich synchron zum ladestatus,was mir auch so gut gefällt.

Naja, noch ein grund es nicht zu verwenden, wenn das ganze so schnell geht, warum läßt du nicht den Browser die Arbeit ganz alleine machen, das geht dann noch schneller.

Struppi.

[Alain]

hi,

wieso,
javascript hat doch mit dem server nichts am hut?!

Sag ich auch nicht.

Wenn der Server einen falschen Header bei den Bildern sendet kann es es sein, dass du die Bilder erst mit dem skript lädst und dann auf der Seite wo du sie benutzen willst nochmal.

ahaaaaa,ich glaube das erklärt einiges.Wenn ich z.B.
mit dem IE die seite aufrufe(mit proxy->langsame verbindung) und dann
über die onmouseover bilder fahre,dann dauerts immer etwas länger,bis diese bilder angezeigt werden,was so gut heisst dass der browser die bilder jedesmal lädt über den proxy.Wenn ich aber die seite verlasse und gleich wieder aufrufe,dann kommen die bilder schnell,was verm. bedeutet,dass der browser die bilder diesmal vom cache holt.
Kann man das nun so ändern,dass der IE die bilder gleich vom cache holt,anstatt jedesmal vom server(beim ersten aufruf)?Oder liegt das am script?
Die onmouseover bilder werden so
normal0 = new Image();
normal0.src = "ind04.jpg";     /* welcome-Grafik */
light0 = new Image();
light0.src = "ind04b.jpg"; /* welcome-neu-Grafik */
deklariert
und mit
function pichange(imgnr,imgobj) {
window.document.images[imgnr].src = imgobj.src;
}
aufgerufen.Diese funktion ist ebenfalls im loadbar-script intergriert,wo der preload stattfindet->frage:
kann man die beide irgendwie mit einander verbinden das preoload und die onmouseover funktionen bzw. vars oder muss das seperat sein?
hat das eventuell damit zu tun dass die onmouseover bilder jedesmal vom server geladen werden anstatt vom cache?Ich meine diese bilder wurden doch schon vom preload geladen.

Oder wenn der User seinen Cache ausgeschaltet hat.

img[i].onerror = dispbar; //was passiert da?

Du weisst dem Handler eine Funktionsreferenz zu. Im Falle des Auftretens des events wird diese aufgerufen. Hier in dem Falle, wenn das bild nicht geladen werden kann.

man könnte da doch die hidebar() funktion aufrufen?

das script scheint tatsächlich so zu funktionieren,so wars auch erwünscht,obwohl bei einer schnellen verbindung sieht man die loadbar kaum oder nur kurz aufblitzen.Ich habe mit einem proxy eine langsame verbindung simuliert und die loadbar lädt sich tatsächlich synchron zum ladestatus,was mir auch so gut gefällt.

Naja, noch ein grund es nicht zu verwenden, wenn das ganze so schnell geht, warum läßt du nicht den Browser die Arbeit ganz alleine machen, das geht dann noch schneller.

warum?Damit es dem benutzter nicht langweilig wird und er wenigstens eine blaue loadbar sieht während die bilder geladen werden und weil mir das gefällt,so ein balken der lädt.Im NS7 bzw. Mozilla übrigens zeigt er mir alles perfekt an und läuft tadellos nur der IE hat da seine problemchen mit dem loadbar script.
Grüsse
Alain

[Alain]

hallo Struppi,
nochmal,
so jetzt hab ich es hingekriegt,wie es sein soll,ähnlich wie bei twb.
Der checkload musste ich trotzdem beibehalten,aber alles geht jetzt ohne set Timeout.Hier meine version nochmal:
dasselbe wie vorher nur...
for(i=0;i<image.length;i++){
img[i]=new Image();
img[i].onload = checkload;
img[i].src=image[i];

function dispbar(){
cplayer(done, 0, size*count, barheight, 0);
if(count>=image.length)hidebar();
}

function checkload(){
count++;
prozent=Math.round(count/image.length*100);
if (count<image.length) {
dispbar();
status='Images'+count+' Loading...'+prozent+'%';
} else hidebar();
}

function hidebar(){
(NS4)? outer.visibility="hide" : outer.style.visibility="hidden";
status='Loading complete!';
imgdone=true;
return imgdone;
}

Bei Deiner version wird ja nur dispbar ausgeführt und stoppt jenachdem die loadbar aus unerklärlichen gründen,desshalb der if else
zweig im checkload,der entweder die loadbar anzeigt bzw. laufen oder verschwinden lässt.
habs jetzt ausgiebig (paar stunden) getestet mit diversen Browsern.
Grüsse vom
Alain
P.S.Und ein danke für Deine zeit und mühe ;-)->guten rutsch ins neue Jahr,falls Du das brauchen kannst,wünsch ich euch übrigens allen.

[XaraX]

Hallo Alain,

normal4.src = "ind07.jpg";

Ab dieser Zeile beginnt der Browser das Bild zu laden und es ist ihm, wenn vollständig geladen, verfügbar.

Gruß aus Berlin!
eddi