✔ [jQuery] Browser GET-Requests / AJAX - grundsätzlich was passiert wirklich?

[axe van ecks]

Hallo,

es ist nicht mein schönster Titel, aber die Richtung stimmt. Ich würde gerne bilder dynamisch nachladen und die Zwischenzeit mit einer Ladegrafik überbrücken, dafür gibt es auch viel Infomaterial zu finden, aber die Fragen zu meinem konkreten Problem konnte ich mir damit nicht beantworten.

Ich gehe folgendermaßen vor:

1. leere das entsprechende div element und füge die Ladegrafik hinzu
2. füge dem div element als hintergrund das bild hinzu
3. entferne die ladegrafik

(ich verwende hier keine der von jQuery angebotenen AJAX Funktionen, sondern nur die .css() bzw. .append() und .empty() Funktionen auf den divs an)

Über firebug konnte ich sehen, dass auch jedesmal wenn ein bild nachgeladen wurde, auch ein GET-Request vom Browser kommt.
Ich arbeite auf einem lokalem Server (XAMPP) und kann daher eine langsamere Verbindung nur schwer simulieren (meines Wissens nach). Deshalb habe ich das ganze mit einem setTimeout(...) umklammert. Soweit ich sehen kann funktioniert alles.

Nun wollte ich fragen, was hier im Hintergrund passiert in Bezug auf folgende Frage: Kann ich sicherstellen, dass, falls die Verbindung langsam genug ist, immer zuerst die Ladegrafik angezeigt wird und auch erst entfernt wird, sobald das Bild vollständig geladen ist?
Darüber hinaus interessiert mich noch, ob das Programm wartet, bis die Grafik geladen ist oder wird in der Zwischenzeit eine weitere Ausführung stattfindet?

 

[Sven Mintel]

Moin,

Nun wollte ich fragen, was hier im Hintergrund passiert in Bezug auf folgende Frage: Kann ich sicherstellen, dass, falls die Verbindung langsam genug ist, immer zuerst die Ladegrafik angezeigt wird und auch erst entfernt wird, sobald das Bild vollständig geladen ist?
Darüber hinaus interessiert mich noch, ob das Programm wartet, bis die Grafik geladen ist oder wird in der Zwischenzeit eine weitere Ausführung stattfindet?

Was den Ladezustand der Grafiken betrifft:
Sofern du nicht den onload-Event der Grafiken mit einbeziehst, sind diese für JS nicht von Bedeutung....welche Grafik wie schnell angezeigt wird, ist somit dem Zufall überlassen.
Sicher ist nur jenes:
Deine JS-Anweisungen werden in der Reihenfolge abgearbeitet, wie sie notiert sind.

Der Unterschied deiner Vorgehensweise zu AJAX ist jener:
AJAX arbeitet asynchron(das ist der Unterschied zur zeitlichen Abarbeitung bei deiner Variante)...nd mit AJAX kannst du die Antwort des Servers verarbeiten.

 

[CPoly]

Ich gehe folgendermaßen vor:

1. leere das entsprechende div element und füge die Ladegrafik hinzu
2. füge dem div element als hintergrund das bild hinzu
3. entferne die ladegrafik

Dreh das ganze doch um.

1. Füde dem Div die Ladegrafik als Hintergrundbild hinzu
2. Füge dem Div das Bild als <img /> hinzu

Dann wird die Ladegrafik angezeigt, bis das Bild geladen ist und die Ladegrafik überdeckt.

 

[axe van ecks]

Danke für die Infos. Ich habs jetzt über das onload Event gemacht, da ich die Ladegrafik dann besser positionieren kann, als wenn sie im Hintergrund des div Elements angezeigt wird.