JQuery load Befehl erst nach Preload der angeforderten Seite

[Stefan]

Hallo!

Bin gerade dabei mich in die wunderbare Welt von jQuery einzulesen!!

Nun steh ich gerade an.
...und zwar bei folgendem Sachverhalt:

Ich habe einen div der via der .load Funktion mit Daten gefüttert werden soll.
Sprich mehr oder minder auf einer anderen Seite stehen ein paar Bilder und die will ich per load einbinden.

Ist ja kein Problem jedoch will ich bis die Seite komplett angezeigt wird ein "loading" anzeigen lassen.
So habe ich mir das gedacht ...funktioniert aber leider nicht so wie ich das will ...kann mir wer weiterhelfen? Bisweilen ladet es nämlich einfach gleich die Seite und man sieht den stückhaften Aufbau der Bilder. Würde gerne (oder hab mir gedacht) das solange das "loading" da steht bis die angeforderte Seite fertig geladen wurde und diese dann das loading überschreibt.

<div id="abc">loading...</div>

$("#abc").load("a.php");

und die a.php besteht (natürlich ist das hier alles vereinfacht dargestellt) aus 5 <img src=""> tags die jeweils 5 bilder anzeigen. Der load befehl wird über einen Link ausgelöst und das "loading" steht schon vorher da ...also es soll wenn der Link gedrückt wird das "loading" noch so lange darstehen bis die Seite geladen ist ...danach soll es ersetzt werden durch den Inhalt (in dem Fall durch die Bilder). Jedoch ersetzt es bisher gleich das "loading" und man sieht den unschönen Aufbau der Bilder.

Hoffe jemand hilft mir weiter auch wenn es villeicht eine sehr einfache Frage ist.

lg stefan

[LX]

Das Problem besteht mitunter darin, dass der HTML-Source zur Einbindung der Bilder zwar schon geladen ist, die darin eingebundenen Bilder jedoch noch nicht.

Lösungsansatz: warte, bis die Bilder tatsächlich geladen sind. Wenn die Bilder bspw. keine Angabe von width und height haben, kannst Du bspw. warten, bis $(bild).height() > 0 ist.

Gruß, LX

[molily]

Lösungsansatz: warte, bis die Bilder tatsächlich geladen sind.

Dazu müssen sie erst einmal ins DOM eingefügt werden, zumindest unsichtbar. Es verhalten sich aber nicht alle Browser ähnlich was das Laden unsichtbarer Bildern angeht. Zuverlässiger wäre das Vorladen der Bilder über Image-Objekte, die man anhang der im HTML-Schnipsel (übers DOM) gefundenen img-Elemente findet. Jedem  Image verpasst man ein load-Ereignis mit derselben Handlerfunktion. Das erhöt einen Zähler. Wenn der Zähler die Zahl der Images erreicht hat, sind alle geladen und das HTML kann eingebunden werden.

Will man diesen absurden Aufwand betreiben? Nein. Wozu?

Mathias

[LX]

Man kann natürlich auch eine gewisse Ladezeit voraussetzen, bspw. 250ms. Wenn es bis dahin nicht geladen ist, Pech.

Gruß, LX

[Stefan]

Danke euch!!

hat mich schon weiter gebracht!

lg stefan

[molily]

Dein Vorhaben ist nicht sinnvoll.

Ist ja kein Problem jedoch will ich bis die Seite komplett angezeigt wird ein "loading" anzeigen lassen.
Bisweilen ladet es nämlich einfach gleich die Seite und man sieht den stückhaften Aufbau der Bilder.

Ja, das ist am benutzerfreundlichsten. Wenn der Benutzer einen tatsächlichen Ladevorgang sieht, dann wartet er, wenn er nur ewig lange ein »Wird geladen« sieht, dann springt er eher ab.

Ein anderes Verhalten zu emulieren wäre ein großer Aufwand, würde mit den Konventionen des Webs und den Erwartungen des Benutzers brechen. Es lohnt sich in keiner Hinsicht! Dieser Effekt bringt dem Benutzer nichts außer Ärger.

Würde gerne (oder hab mir gedacht) das solange das "loading" da steht bis die angeforderte Seite fertig geladen wurde und diese dann das loading überschreibt.

Mit der Frage »Ich will, dass mein gesamtes Dokument erst angezeigt wird, wenn alles darin geladen ist« kommen hier öfters Leute. Es mit JavaScript zu lösen und ins Dokument nur »Loading« hineinzuschreiben ist noch problematischer, weil die Inhalte dann ohne JavaScript nicht zugänglich sind. So etwas macht keine ernstzunehmende Site - aus guten Gründen. Es ist eine Spielerei, die die Benutzer vergrault.

Mathias