bilder vorladen mit statusanzeige?

[xyz]

nabend,

hätte mal ne frage zum thema bilder vorladen.
für meine bildergalerie würde ich gerde die bilder der
navigationsbar vorladen.

läuft auch sehr gut.

nun wollte ich beim vorladen aber noch infos anzeigen.

beispiel:
20 bilder, also wird auf der seite angezeigt:

bild 1 / 20 geladen
bild 2 / 20 geladen
..

nun zu meinem problem. hab das ganze iterativ sowie rekursiv probiert,
in beiden fällen macht javascript aber nicht das was ich will

beim vorladen zeigt er garnichts an. erst nachdem er mit dem vorladen
fertig ist.
hier ist mal eine rekursive version meines vorladens
ist als for-schleife natürlich schöner, hatte das nur so gemacht
da es mit for nicht ging.. naja, so gehts auch nicht lol.

function preload(i){

if(i != (images + 1)){
a[i] = new Image();
a[i].src = i + ".JPG";
document.getElementById("info").innerHTML = i
preload(i + 1);
}

}

er läd alle bilder vor, zeigt aber nichts an.
hab auch nur erfahrungen mit java, javascript hab ich vorher
noch nie benutzt.

wär nett wenn mir jemand kurz erklären würde wieso javascript mit
meinem quelltext probleme hat :(

vielen dank schonmal

[Houyhnhnm]

wär nett wenn mir jemand kurz erklären würde wieso javascript mit
meinem quelltext probleme hat :(

JS hat keine Probleme mit Deinem Quelltext - es lädt ja schließlich die Bilder.

Aus dem Verhalten würde ich eher schließen, daß die Bilder asynchron geladen werden: Wenn a[i].src = i + ".JPG"; ausgeführt wird, dann wird das Bild im Hintergrund geladen, während der JS-Interpreter weiter das Programm abarbeitet, also das Laden des nächsten Bildes anstößt, während die vorherigen erst so langsam eintrudeln.

Um eine Fortschrittsanzeige zu machen, müßtest Du ein Bild anfordern und dann warten, bis das onload-Ereignis eingetreten ist, dann die Fortschrittsanzeige aktualisieren und das nächste Bild anfordern... bis alles geschafft ist.

[Der Martin]

Hallo,

für meine bildergalerie würde ich gerde die bilder der navigationsbar vorladen.
läuft auch sehr gut.

das mag sein, aber das "Vorladen" von Bildern bringt unterm Strich selten den Vorteil, den sich der Autor erhofft.

nun wollte ich beim vorladen aber noch infos anzeigen.
beispiel:
20 bilder, also wird auf der seite angezeigt:
bild 1 / 20 geladen
bild 2 / 20 geladen

Diesen Fortschritt zeigen gängige Browser doch schon vollautomatisch in der Statuszeile an (z.B. "18 objects remaining"). Warum willst du diese Funktion noch einmal nachbauen?

beim vorladen zeigt er garnichts an. erst nachdem er mit dem vorladen fertig ist.

Wer ist "er"?

function preload(i){
if(i != (images + 1)){
a[i] = new Image();
a[i].src = i + ".JPG";
document.getElementById("info").innerHTML = i
preload(i + 1);
}

}

er läd alle bilder vor, zeigt aber nichts an.

"Er"?
Ähm, ja, natürlich: Dein Script läuft ja auch ohne Unterbrechung solange, bis alle Bilder geladen oder zumindest angefordert sind. Der Browser hat ja zwischendurch gar keine Gelegenheit, das modifizierte Element #info neu anzuzeigen.
Das Problem wäre beim iterativen Vorladen mit einer for-Schleife genau dasselbe. Du kannst mit Javascript zwar HTML-Elemente verändern, aber du musst dem Browser auch eine Chance geben, diese Änderungen auch anzuzeigen, indem du das Script beendest oder unterbrichst.

Es ist zwar nicht wirklich elegant, aber eine sehr probate Möglichkeit: Kehre zur iterativen Methode zurück und mach aus der for-Schleife eine State Machine. Baue dabei *nur den Schleifenrumpf* in eine JS-Funktion. Diese Funktion lädt dann nur ein einziges Bild vor bzw. fordert es vom Server an. Am Ende ruft die Funktion sich selbst wieder auf, aber nicht direkt, sondern über ein setTimeout() z.B. 10ms später (den ersten Durchlauf musst du dann natürlich "von Hand" anstoßen). Die Schleifenvariable kannst du dabei global machen (quick'n dirty, aber leicht zu realisieren), oder auch mit dem setTimeout-Aufruf jedesmal neu übergeben (etwas mehr Aufwand, aber "sauber").
So hat der Browser zwischen zwei "Schleifendurchläufen" Gelegenheit, die Veränderungen, die JS vorgenommen hat, auch anzuzeigen.

hab auch nur erfahrungen mit java, javascript hab ich vorher noch nie benutzt.

Mir geht's genau umgekehrt: Ich hab von Java keine Ahnung. ;-)

Schönen Abend noch,
 Martin

[xyz]

das mag sein, aber das "Vorladen" von Bildern bringt unterm Strich selten den Vorteil, den sich der Autor erhofft.

hab auch schon ne menge contra zum thema vorladen gehört
aber in diesem fall ist es das kleinere übel denke/hoffe ich

Diesen Fortschritt zeigen gängige Browser doch schon vollautomatisch in der Statuszeile an (z.B. "18 objects remaining"). Warum willst du diese Funktion noch einmal nachbauen?

sieht einfach übersichtlicher aus. wer schaut schon in die statusleiste? =)

"Er"?

mr. browser ;)

»»Du kannst mit Javascript zwar HTML-Elemente verändern, aber du musst dem Browser auch eine Chance geben, diese Änderungen auch anzuzeigen, indem du das Script beendest oder unterbrichst.

hatte mir sowas schon gedacht.
ich glaub die einfachste lösung ist dann wohl jedes bild
"manuell" zu laden, ohne rekursion/iteration

image1.src = ""
image2.src = ""
..

somit kann ich ja dann zwischen den zu ladenden elementen
einen statustext ausgeben.
keine sehr schöne lösung zwar aber naja

Mir geht's genau umgekehrt: Ich hab von Java keine Ahnung. ;-)

sei froh =)

besten dank nochmal

[Der Martin]

n'Abend!

das mag sein, aber das "Vorladen" von Bildern bringt unterm Strich selten den Vorteil, den sich der Autor erhofft.
hab auch schon ne menge contra zum thema vorladen gehört aber in diesem fall ist es das kleinere übel denke/hoffe ich

naja, wenn du meinst ...

Diesen Fortschritt zeigen gängige Browser doch schon vollautomatisch in der Statuszeile an (z.B. "18 objects remaining"). Warum willst du diese Funktion noch einmal nachbauen?
sieht einfach übersichtlicher aus. wer schaut schon in die statusleiste? =)

Keine Ahnung - für mich ist das eine der wichtigsten Informationsquellen meiner Browser.

ich glaub die einfachste lösung ist dann wohl jedes bild
"manuell" zu laden, ohne rekursion/iteration
image1.src = ""
image2.src = ""
somit kann ich ja dann zwischen den zu ladenden elementen einen statustext ausgeben.

Das Problem bleibt dasselbe: Das Script rattert dann stur die Anweisungen durch, gibt dem Browser aber zwischendurch wieder keine Gelegenheit, die Veränderungen auch anzuzeigen.

Schönen Abend noch,
 Martin

PS: Warum machst du immer an scheinbar willkürlichen Stellen im osting-Text Zeilenumbrüche?

[xyz]

Das Problem bleibt dasselbe: Das Script rattert dann stur die Anweisungen durch, gibt dem Browser aber zwischendurch wieder keine Gelegenheit, die Veränderungen auch anzuzeigen.

hm, dann lass ich das mit dem statustext wohl besser ganz :/

PS: Warum machst du immer an scheinbar willkürlichen Stellen im osting-Text Zeilenumbrüche?

das gibt meinem text eine persönliche note

gute nacht und danke nochmal