✔ Ladebalken bzw. -grafik bei Seitenaufbau

Status
Nicht offen für weitere Antworten.
B

BlackFladder

Grünschnabel
Hey,

vor kurzem habe ich (in einem anderen Forum) folgende Zeilen veröffentlicht, die mein Problem beschreiben:

im Rahmen eines Web-Projekts werden Daten per SAP rfc for PHP aus SAP ausgelesen, weiter mit PHP aufbereitet und dann auf der Website ausgegeben.

Über so genannte Business Advanced Programming Interfaces (BAPIs) wird dieses Auslesen ermöglicht.

Leider dauert das ganze Prozedere ca. 5 Sekunden (Anmeldung an SAP, Aufrufen der BAPIs, Auslesen der Daten, etc.). Um zu verhindern, dass Benutzer vorschnell die Seite verlassen und nicht auf den vollständigen Seitenaufbau warten, möchte ich eine Ladegrafik implementieren, die deutlich macht, dass "noch was passiert".

Animiert hat mich dabei Thick Box (benutzt jquery). Bei einer Bildergallerie, die damit erzeugt werden kann, wird bis zum vollständigen Seitenaufbau eine Ladegrafik angezeigt.

Meine Frage:
Wie kann ich meiner Website beim Seitenaufbau so eine Grafik verpassen?
Hat jemand von euch damit schon Erfahrung?

Code Thickbox: Thick Box Code
Code Jquery: Code JQuery
Code Thickbox CSS-Definitionen:Code CSS Thick Box
Zum Vergrößern anklicken....

Durch viele anstehende Klausuren ist bei mir Zeit grad Mangelware - trotzdem werde ich natürlich versuchen, mich der Sache selbst anzunähern.
Ein großes Problem dürfte es ja eigentlich nicht sein, zumal der wesentliche Teil in der thickbox.js gleich oben aufgeführt ist:

+++ Code wegen Forum-Bestimmungen wieder entfernt +++

Wobei für mich die tb_init-Funktion entfallen dürfte, weil ich für meine Zwecke keine ThickBox erzeugen, sondern lediglich den Ladebalken verwenden möchte.

Die Implementation ist mir leider unklar :(.

Vielen Dank für jede Unterstützung,

Gruß
Blacky
 
Zuletzt bearbeitet:
Moin,...

BlackFladder hat gesagt.:
Wie kann ich meiner Website beim Seitenaufbau so eine Grafik verpassen?
Zum Vergrößern anklicken....

Erstmal eingangs: Thickbox brauchst du da wie vermutet nicht unbedingt, man muss ja schliesslich keine Apfelsinenplantage kaufen, wenn man Appetit auf ein Gläschen Orangensaft hat :-)

Die Vorgehensweise ist recht simpel :)
Man tut gleich zu Beginn des <body>'s JS-Code dort hinein, der einen Layer ins Dokument schreibt, der 100% des Platzes einnimmt, und somit alles überdeckt(dies tut man mit JS, damit die Seite auch ohne JS benutzbar bleibt). In diesem Layer positionierst du alles das, was während des Ladens angezeigt werden soll....also bspw. eine animierte Grafik mit dem Balken.

Beim onload-Event des Fensters wird dieser Layer ausgeblendet...das wars schon.

Hier findest du einen Beispielcode inkl. Link zur Demo(das ganze dort lässt sich noch einkürzen, da dort ein Ladebalken entsprechend der Zahl der bereits geladenen Grafiken erzeugt wird, was mehr Skriptcode erfordert, du aber nicht zu Benötigen scheinst)
http://www.tutorials.de/forum/1017695-post4.html
 
Danke schön für die schnelle Antwort,

ich werd mir den Code auf alle Fälle mal anschaun - Mit der Apfelplantage muss ich dir schon recht geben - allerdings hab ich vergessen zu erwähnen, dass ich wahrscheinlich so eine "Thick-Box-Galelrie" verwende und sich der entsprechende Code daher ohnehin schon auf dem Server befindet.

Schnell beim Überfliegen ist mir folgender Hinweis in dem Code auf den du verlinkt hast, aufgefallen:

für: DOM->Quirks-Mode(nix opera)
Zum Vergrößern anklicken....

Wenn der Code nicht kompatibel zu Opera ist, wäre das ein Hindernis - ich dachte, dass ich mir mit ThickBox gleich den Vorteil erkauf, dass ich weiterhin browserunabhängig bleiben kann und mir vor allem einfach ein paar passende Zeilen Code "leihen kann", die erprobt sind und auch ihren Zweck erfüllen.

Danke nochmals,
Blacky
 
Zuletzt bearbeitet:
Naja...weiss auch nicht mehr, warum ich das mit Opera hingeschrieben hab, jetzt geht es auch mit Opera:-)...ich glaube, es ging dabei um die complete-Eigenschaft der Grafiken, welche dereinst in Opera nicht verfügbar war.

Aber die Vorgehensweise sollte klar sein...Layer über alles legen...beim onload Layer verstecken.
 
Okay - und die Tatsache, dass der Seitenaufbau, von ner externen Datenquelle (hier SAP-Datenbank) abhängt tut der Sache auch keinen Abriss?
Kann das Layer auch nur über Teile des body-Bereichs (also einen speziellen Div-Container) gelegt werden?

Dann werf ich mich mal ins Vergnügen, sobald Zeit ist :)

Kannst du eigentlich ein Buch empfehlen, das sowohl Grundlagen als auch Fortgeschrittenes bezüglich Java Script / Ayax vermittelt? Hab bei amazon schon geschaut - aber auch aus den Bewertungen wurde ich nicht immer schlau - ist ja grundsätzlich immer so ne Sache mit derartigen Angaben.

Danke schön für deine Hilfe,

Gruß
Blacky
 
Das mit der externen Datenquelle sollte kein Problem sein, das sind ja soweit ich das im Kurzen mitbekommen habe, auch nur PHP-Skripte, welche dort eingebunden werden.
Etwas anderes wäre es, wenn die Daten per AJAX geholt werden würden....aber auch dann ginge es, man müsste nur den readystate des Request überwachen.

Das mit dem <div> sollte eigentlich gehen, man müsste den Layer dann halt nur woanders platzieren und seine Grösse anders setzen, damit er nur das div verdeckt.


Bücher kann ich leider keine empfehlen, halte ich auch nicht für empfehlenswert.
Browser und die ganzen Frameworks werden permanent weiterentwickelt..da ist ein Buch unweigerlich immer altes Eisen.
Im Netz findet sich alles, was man wissen will&muss, mehr als man in Hunderte Bücher schreiben könnte.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück