Image.onLoad zu früh ausgeführt?

[dunst-105]

Hallo ich verzweifele gerade noch an meinem Problem...
Ich will auf meiner Seite einige Bilder laden und da die Seite ohne den Bildern sinnlos wäre lege ich anfangs eine div Box über den ganzen Schirm als "Ladebildschirm".

Nun wollte ich wenn das letzte Bild geladen ist, per onLoad die div Box ausblenden.
Nur leider wird sie nicht am Ende sondern gleich zu Beginn ausgeblendet, an was könnte das liegen?

Hier unten mein Code:

  
var BildListe = new Array();  
var path ="...pfad...;  
var ending = ".jpg";  
  
BildListe[0] = path + "1A" + ending;  
BildListe[1] = path + "1B" + ending;  
BildListe[2] = path + "1C" + ending;  
BildListe[3] = path + "1D" + ending;  
BildListe[4] = path + "1E" + ending;  
BildListe[5] = path + "1F" + ending;  
BildListe[6] = path + "1G" + ending;  
BildListe[7] = path + "1H" + ending;  
...  
  
var Bilder = new Array();  
  
function preload()  
{  
  for (i = 0; i < BildListe.length; i++)  
  {  
    Bilder[i] = new Image();  
	  
    if (i == (BildListe.length-1))  
    	Bilder[i].onLoad = makeVisible();  
	  
    Bilder[i].src = BildListe[i];  
  }  
}  
function makeVisible()  
{  
    document.getElementById(\'loaddiv\').style.display=\'none\';  
}  
preload();  

[MudGuard]

Hi,

Hallo ich verzweifele gerade noch an meinem Problem...
Ich will auf meiner Seite einige Bilder laden und da die Seite ohne den Bildern sinnlos wäre lege ich anfangs eine div Box über den ganzen Schirm als "Ladebildschirm".

Nun wollte ich wenn das letzte Bild geladen ist, per onLoad die div Box ausblenden.
Nur leider wird sie nicht am Ende sondern gleich zu Beginn ausgeblendet, an was könnte das liegen?

Bilder[i].onLoad = makeVisible();

Weil Du dem onload-Handler nicht die Funktion makeVisible zuweist, sondern das Ergebnis des Aufrufs von makeVisible().

function makeVisible()
{
    document.getElementById('loaddiv').style.display='none';
}

Was sollen hier die \ vor den ' ?

Ach ja, wenn die Funktion ohne die \ wäre, würde bereits nach dem Laden des ersten Bilds Dein loaddiv unsichtbar.

cu,
Andreas

[MudGuard]

Hi,

Ach ja, wenn die Funktion ohne die \ wäre, würde bereits nach dem Laden des ersten Bilds Dein loaddiv unsichtbar.

Ziehe ich zurück, Du weist das ja nur dem letzten Bild zu.
Fraglich bleibt aber, ob zu dem Zeitpunkt, zu dem das letzte Bild fertiggeladen ist, auch alle anderen Bilder bereits fertig geladen sind.

cu,
Andreas

[dunst-105]

Danke erstmals für die schnelle Antwort :)

Bilder[i].onLoad = makeVisible();

Weil Du dem onload-Handler nicht die Funktion makeVisible zuweist, sondern das Ergebnis des Aufrufs von makeVisible().

Und wie mache ich das dann richtig?
Bilder[i].onLoad = makeVisible; ?

function makeVisible()
{
    document.getElementById('loaddiv').style.display='none';
}

Was sollen hier die \ vor den ' ?

das ganze wird aus einer php datei geschrieben - befindet sich also in nem string, deshalb die ' hätte auch " nehmen können.

[Struppi]

Und wie mache ich das dann richtig?
Bilder[i].onLoad = makeVisible; ?

Wenn du noch die Groß und Kleinschreibung beachtest, dann ist das richtig ja.
Der Handler heißt onload

das ganze wird aus einer php datei geschrieben - befindet sich also in nem string, deshalb die ' hätte auch " nehmen können.

Wenn du eine JS Frage hast, dann poste Bitte nicht den PHP Code, sonst können wir nicht sehen ob du etwas falsch machst.

Struppi.

[dunst-105]

Und wie mache ich das dann richtig?
Bilder[i].onLoad = makeVisible; ?

Wenn du noch die Groß und Kleinschreibung beachtest, dann ist das richtig ja.
Der Handler heißt onload

das ganze wird aus einer php datei geschrieben - befindet sich also in nem string, deshalb die ' hätte auch " nehmen können.

Wenn du eine JS Frage hast, dann poste Bitte nicht den PHP Code, sonst können wir nicht sehen ob du etwas falsch machst.

Merk ich mir fürs nächste mal danke :)

Hab es jetzt so gelöst, da mit ist auch sicher, dass alle Bilder und nicht nur das letzte geladen sind:

  
var Bilder = new Array();  
var index = 0;  
var target = BildListe.length-1;  
							  
function Vorladen()  
{  
   for (i = 0; i < BildListe.length; i++)  
   {  
      Bilder[i] = new Image();  
      Bilder[i].onload = makevisible;  
      Bilder[i].src = BildListe[i];  
   }  
}  
function makevisible()  
{  
   index++;  
   if (index == target)  
      document.getElementById('loaddiv').style.display='none';  
}  
Vorladen();  

[Der Martin]

Hallo,

Wenn du eine JS Frage hast, dann poste Bitte nicht den PHP Code, sonst können wir nicht sehen ob du etwas falsch machst.
Merk ich mir fürs nächste mal danke :)

sollte eigentlich selbstverständlich sein ...

Hab es jetzt so gelöst, da mit ist auch sicher, dass alle Bilder und nicht nur das letzte geladen sind:

Warum hängst du dich nicht ans onload-Event vom body? Dann ist auch garantiert, dass alle Bilder geladen sind, und du kannst das ganze Preload-Gebammel entsorgen.

Ciao,
 Martin

[MudGuard]

Hi,

Warum hängst du dich nicht ans onload-Event vom body? Dann ist auch garantiert, dass alle Bilder geladen sind, und du kannst das ganze Preload-Gebammel entsorgen.

Ein Grund könnte sein, weil dann auch auf das Laden anderer Resourcen gewartet wird.

cu,
Andreas

[Der Martin]

Hallo,

Warum hängst du dich nicht ans onload-Event vom body? Dann ist auch garantiert, dass alle Bilder geladen sind, und du kannst das ganze Preload-Gebammel entsorgen.
Ein Grund könnte sein, weil dann auch auf das Laden anderer Resourcen gewartet wird.

daran hatte ich gedacht - ich sehe das als weiteren Vorteil.

Ciao,
 Martin

[Der Martin]

Hi,

Ich will auf meiner Seite einige Bilder laden und da die Seite ohne den Bildern sinnlos wäre lege ich anfangs eine div Box über den ganzen Schirm als "Ladebildschirm".

es heißt "ohne die Bilder". Im Deutschen wird "ohne" mit Akkusativ benutzt - im Gegensatz zu "mit", das verlangt den Dativ. Nicht logisch, ist aber so.

Nun wollte ich wenn das letzte Bild geladen ist, per onLoad die div Box ausblenden.
Nur leider wird sie nicht am Ende sondern gleich zu Beginn ausgeblendet, an was könnte das liegen?

Du hast hier gleich mehrere Böcke geschossen.

function preload()
{
  for (i = 0; i < BildListe.length; i++)
  {
    Bilder[i] = new Image();

if (i == (BildListe.length-1))

Wenn das letzte Bild in der Liste bearbeitet wird ...

Bilder[i].onLoad = makeVisible();

... rufe die Funktion makeVisible() auf und weise ihren Rückgabewert der Phantasieeigenschaft onLoad zu.

* Denkfehler #1:
   Es gibt keine Eigenschaft onLoad, bevor du eine erzeugst. Vermutlich meinst du onload.
 * Denkfehler #2:
   Du gibst nur dem letzten Bild in der Liste einen onload-Handler, weißt aber gar nicht, in
   welcher Reihenfolge der Browser die Bilder wirklich lädt.
 * Denkfehler #3:
   Du rufst die Eventhandler-Funktion makeVisible() sofort auf, anstatt die Funktionsreferenz dem
   Eventhandler zuzuweisen.

document.getElementById('loaddiv').style.display='none';

Die Backslashes vor den Anführungszeichen dürften einen Javascript-Syntaxfehler schmeißen.

So long,
 Martin