AJAX und onLoad

[Capior]

Hallo zusammen,

bei body-onLoad rufe ich eine "Ajax-Funktion" auf, welche mir viele Bilder in mein Dokument lädt. Bis die Bilder vollständig geladen wurden, möchte(!) ich einen Lade-Balken anzeigen. Mein Problem liegt jetzt darin, rauszufinden, wann die Bilder fertiggeladen wurden. Die Funktion zum Wegblenden des Lade-Balkens und Anzeigen der Bilder rief ich bisher direkt nach meinem Ajax-Call auf, doch das ist natürlich zu früh...die Bilder sind noch nicht komplett geladen.

Wie kann ich also wissen, wann alle Bilder, welche ja dynamisch geladen werden, komplett an den User geschickt wurden?

Danke, schöne
  Capior

[wahsaga]

hi,

bei body-onLoad rufe ich eine "Ajax-Funktion" auf, welche mir viele Bilder in mein Dokument lädt.

Wieso benutzt du dazu AJAX?
(Oder sind die Bildnamen dem Client nicht bekannt, und werden vom Server übermittelt?)

Bis die Bilder vollständig geladen wurden, möchte(!) ich einen Lade-Balken anzeigen. Mein Problem liegt jetzt darin, rauszufinden, wann die Bilder fertiggeladen wurden.

Erzeuge Javascript-Bildobjekte, und statte diese dynamisch mit einen onload-Event aus - und zähle dann jeden solchen, der feuert, mit. Wenn der Zähler die Gesamtanzahl an (neu zu ladenden) Bildern erreicht hat, sind'se alle fertig.
Achtung: Falls ein Bild nicht geladen werden kann, bliebe dabei dein Ladebalken bis zum St. Nimmerleinstag stehen. Also zusätzlich onerror nutzen, um die Bilder zu ermitteln, die nicht geladen werden konnten.

gruß,
wahsaga

[Capior]

hi,

hallo,

Wieso benutzt du dazu AJAX?

Pure Freude ;-)

Erzeuge Javascript-Bildobjekte, und statte diese dynamisch mit einen onload-Event aus - und zähle dann jeden solchen, der feuert, mit. Wenn der Zähler die Gesamtanzahl an (neu zu ladenden) Bildern erreicht hat, sind'se alle fertig.

Dacht ich mir. Nur ist onLoad für img-Tags gar nicht valid, doch die Browser unterstützens trotzdem. Also mache auch ichs trotzdem.

Achtung: Falls ein Bild nicht geladen werden kann, bliebe dabei dein Ladebalken bis zum St. Nimmerleinstag stehen. Also zusätzlich onerror nutzen, um die Bilder zu ermitteln, die nicht geladen werden konnten.

Zu welchem Zeitpunkt muss ich testen? Auf welche(s) Objekt(e) muss ich onError anwenden?

gruß,
wahsaga

Danke, ciao!
  Capior

[Der Martin]

Hallöchen,

Erzeuge Javascript-Bildobjekte, und statte diese dynamisch mit einen onload-Event aus - und zähle dann jeden solchen, der feuert, mit. Wenn der Zähler die Gesamtanzahl an (neu zu ladenden) Bildern erreicht hat, sind'se alle fertig.
Dacht ich mir. Nur ist onLoad für img-Tags gar nicht valid, doch die Browser unterstützens trotzdem. Also mache auch ichs trotzdem.

nein, deswegen sollst du die image-Objekte ja dynamisch mit JS erzeugen und ebenso dynamisch mit einem onload-Handler versehen. Das hat mit HTML nichts zu tun, kann somit auch nicht die Validität des Dokuments beeinträchtigen.

Zu welchem Zeitpunkt muss ich testen? Auf welche(s) Objekt(e) muss ich onError anwenden?

Sortieren wir die Frage mal um. ;-)
Auf welche Objekte? Na, prophylaktisch auf alle image-Objekte, die du im oberen Schritt erzeugt hast. Den onerror-Handler kannst du gleichzeitig mit dem onload-Handler anflanschen.
Und zu welchem Zeitpunkt testen? Na, immer dann, wenn einer der onerror- oder onload-Handler feuert. Denn in beiden Fällen ist der Ladevorgang für eines der Bilder beendet - entweder erfolgreich oder nicht.

So long,
 Martin

[Struppi]

Achtung: Falls ein Bild nicht geladen werden kann, bliebe dabei dein Ladebalken bis zum St. Nimmerleinstag stehen. Also zusätzlich onerror nutzen, um die Bilder zu ermitteln, die nicht geladen werden konnten.
Zu welchem Zeitpunkt muss ich testen? Auf welche(s) Objekt(e) muss ich onError anwenden?

Der Event heißt onerror und wird gefeuert, wenn das bild nicht geladen werden konnte.

Du musst nochwas beachten, der IE feuert kein onload, wenn das Bild bereits im cache ist, d.h. du musst zusätzlich auf complete prüfen.

var img = new Image();
img.onload = img.onerror = function() { img_load(this); };
if(img.complete) img_load(img);
img.src = ....

function img_load(bild)
{
// hier kannst du deinen Zähler erhöhen
// und prüfen ob alle Bilder geladen wurden
}

Das kann man natürlich verfeinern, in dem du eine separate Funktion für onlaod und onerror schreibst und dann eine entsprechende Meldung welches Bild nicht geladen werden konnte ausgibst.

Struppi.

[fanelf.de]

Wieso benutzt du dazu AJAX?
Pure Freude ;-)

ajax läuft standardmäßig asynchron. in dieser zeit möchtest du etwas anders machen? oder?

ja - den ladebalken vergrößern. also eine schleife um einen wachsenden ladebalken laufen lassen. mach it.

die fertigstellung berichtet asynchrones ajax durch aufruf einer ereignisroutine. in dieser mußt du dafür sorgen, daß der ladebalken verschwindet (z.b. durch setzen einer abbruchbedingung).

[wahsaga]

hi,

ajax läuft standardmäßig asynchron. in dieser zeit möchtest du etwas anders machen? oder?

ja - den ladebalken vergrößern. also eine schleife um einen wachsenden ladebalken laufen lassen. mach it.

die fertigstellung berichtet asynchrones ajax durch aufruf einer ereignisroutine. in dieser mußt du dafür sorgen, daß der ladebalken verschwindet (z.b. durch setzen einer abbruchbedingung).

Weshalb ich explizit nachgefragt hatte war, weil ich nicht wüsste, wie AJAX behilflich sein sollte beim Laden von Bildern.
Ich habe deshalb vermutet, dass er sich nur die Bild_namen_/-URLs per AJAX vom Server holt, und dann mit diesen Bildobjekte in Javascript erzeugt (oder direkt per innerHTML <img>-Tags irgendwo einfügt), ö.ä.

Dann ist AJAX "fertig", wenn es diesen Bildnamen vom Server empfangen hat - damit ist aber das Bild noch nicht geladen. Also nützt es dann nichts, den Status des AJAX-Requests abzufragen, wenn man wissen will, ob die Bilddaten fertig geladen wurden.

gruß,
wahsaga

[Capior]

hi,

hallo,

läuft soweit alles wie gewünscht. Danke euch allen.

gruß,
wahsaga

Schöne, ciao
  Capior

[Karl]

Hallo

Dacht ich mir. Nur ist onLoad für img-Tags gar nicht valid, doch die Browser unterstützens trotzdem. Also mache auch ichs trotzdem.

Und noch so ein Detailteufelchen:
Es ist sicher schon 2 bis 3 Jahre her. Damals musste ich feststellen dass der Netscape (unter Windows) bei Anim-GIFs nach jedem Frame ein onLoad gefeuert hat.

Karl :-)´