[jQuery] Page Load alle 5 Sekunden, vorher Ladebalken zeigen

afr0kalypse · 16.04.2013

Hi zusammen,
ich habe folgendes jQuery Script:

Code:

var refresh = setInterval(function(){       
            // Load the php file that handles the data, send request via POST by using JSON {"arg" : "value" }
            jQuery("#description_span").load(page.php", {arg : val}); 
        },5000);

Das Script soll eben via POST bestimmte Infos alle 5 Sekunden an eine Seite page.php schicken.
Das funktioniert auch wunderbar.
Allerdings wird in den ersten 5 Sekunden nichts angezeigt. Die erste Response dauert also 5 Sekunden. Für diese erste Response möchte ich nun gerne einen Ladebalken oder ein Loading Gif oder so anzeigen.
Hat jemand ne Idee wie man das schick umsetzen kann?

EDIT:
Ich habe es erstmal so gelöst:

Code:

<span id="description_span"><p id="loading">Einen Moment bitte...</p></span>
...
...
jQuery('#loading').ajaxStart(function() {
        jQuery(this).show();
    }).ajaxStop(function(){
        jQuery(this).hide();
    })

Vielleicht kennt ja jemand einen eleganteren, kürzeren Weg

Curanai · 19.04.2013

AW: [jQuery] Page Load alle 5 Sekunden, vorher Ladebalken zeigen

Aaaaalso ... ein paar Verbesserungsvorschläge, die Du vielleicht verwenden kannst (Aufzählung dient nicht der Belehrung, sondern der besseren Lesbarkeit):

[ 1. ] .load() ist nicht $.post()! $.load() kannst Du eher mit $.get() vergleichen ...
[ 2. ] Bekommst Du keine Antwort aus dem Cache? (= gleiches Ergebnis; vgl. Firebug)
[ 3. ] "refresh" sollte mit "$(document).ready()" erst beginnen ... (Performance!?)
[ 4. ] "refresh" sollte sich selbst aufrufen - also als Funktion, die nach "Rückkehr" (Response) den Timer erstellt, fünf Sekunden wartet, den Timer aufhebt ... also nicht global im JavaScript angelegt, sondern nur innerhalb der Funktion und das nur temporär.
[ 5.] Statt "jQuery" evtl. nur "$" nehmen (weniger Dateigröße).
[ 6. ] Fehlerbehandlung wäre wo (User offline [Zwangstrennung], Server has gone away, ...)? Du setzt grundlegend voraus, dass der User immer eine Antwort bekommt ...
[ 7. ] page.php" (!) kann nicht stimmen ... Anführungszeichen fehlt!!
[ 8. ] Trenne AJAX-Scripte von üblichen Dateien (= Unterverzeichnis); macht es viel pflegeleichter und Du findest schneller entsprechende Dateien ...
[ 9. ] Hat "page.php" einen Mechanismus/eine Abhängigkeit drin, dass ich die Datei nicht verwenden könnte? Scriptkiddies sind einfallsreich ...
[ 10. ] User ohne JavaScript spielen bei mir auch keine Rolle ... selbst schuld.

Unabhängig von Punkt 4 oben: Wenn Du einen Ladebalken (grafische Anzeige von "da kommt gleich was") haben willst, verwendest Du die maximal "100 %" (fertig) als Ausgangsbasis, dividierst durch die Wartezeit (5 Sekunden) und bekommst "20 % Zuwachs" je Sekunde. Hierzu eignet sich ein DIV, welches im Sekundentakt 20 % mehr Hintergrundfarbe bekommt ... oder ein einfarbiges IMG innerhalb eines DIV, welches in der width je Sekunde um 20 % anwächst ... und ja, das bedeutet, dass Du einen weiteren Timer benötigst, der genau dies regelt (aber abgebrochen werden muss, wenn "refresh" das erste Mal läuft).

Soviel als Anregung von mir ...

Grüße vom Kaffeebecherrand.