Wie zeige ich ein Jquery-Dialogfeld an, bevor die gesamte Seite geladen wird?

Auf meiner Website kann eine Reihe von Operationen sehr lange dauern.Wie zeige ich ein Jquery-Dialogfeld an, bevor die gesamte Seite geladen wird?

Wenn ich weiß, dass das Laden einer Seite eine Weile dauert, möchte ich während des Ladens der Seite eine Fortschrittsanzeige anzeigen.

Idealerweise würde ich von etwas entlang der Linien sagen:

$("#dialog").show("progress.php");

und haben diese Overlay auf der Seite, die geladen wird (nach der Operation verschwinden abgeschlossen ist).

Das Codieren des Fortschrittsbalkens und das Anzeigen des Fortschritts ist kein Problem. Das Problem besteht darin, dass während des Ladens der Seite eine Fortschrittsanzeige eingeblendet wird. Ich habe versucht, JQuery-Dialoge dafür zu verwenden, aber sie erscheinen nur, nachdem die Seite bereits geladen ist.

Dies muss ein häufiges Problem sein, aber ich bin nicht vertraut genug mit JavaScript, um den besten Weg zu wissen, dies zu tun.

Hier ist ein einfaches Beispiel zur Veranschaulichung des Problems. Der folgende Code zeigt das Dialogfeld nicht an, bevor die 20-Sekunden-Pause beendet ist. Ich habe es in Chrome und Firefox ausprobiert. Tatsächlich sehe ich nicht einmal den Text "Bitte warten ...".

Hier ist der Code ich verwende:

<html> 
    <head> 
     <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script> 

    </head> 
    <body> 
    <div id="please-wait">My Dialog</div> 
    <script type="text/javascript"> 
     $("#please-wait").dialog(); 
    </script> 
    <?php 
    flush(); 
    echo "Waiting..."; 
    sleep(20); 
    ?> 
    </body> 
</html>

Quelle

2009-03-26 Oleg Barshay

Sie werden das Stück Code ausführen müssen sofort nach < body> -Tag, so etwas wie:

<html> 
    <head> 
    </head> 
    <body> 
    <div id="please-wait"></div> 
    <script type="text/javascript"> 
     // Use your favourite dialog plugin here. 
     $("#please-wait").dialog(); 
    </script> 
    .... 
    </body> 
</html>

Hinweis weggelassen ich die Traditionell $ (function() {}), da Sie dieses laden müssen, sobald die Seite angezeigt wird, nicht nachdem das gesamte DOM geladen wurde.

Ich habe das schon einmal gemacht und funktioniert super, auch wenn die Seite noch nicht fertig geladen ist.

EDIT: Sie den Dialog jQuery sicher sein, haben plugin Sie verwenden wird geladen vor Ihre gesamte DOM Lasten. Normalerweise ist das nicht der Fall, Sie werden nicht funktionieren. In diesem Fall müssen Sie eine einfache JavaScript-Lösung wie Lightbox 1 oder Lightbox 2 verwenden.

Quelle

2009-03-26 22:33:37 Seb

+1 Gute Antwort. Beat mich dazu :) Hinweis: Das jQuery-Skript muss geladen werden, bevor dieser Code ausgeführt wird (offensichtlich) –

Das ist richtig, guter Punkt Josh. Sobald die Datei jquery.js lokal zwischengespeichert ist, dauert es nur noch Millisekunden. – Seb

Nun, es scheint, dass es funktionieren sollte, aber wenn ich es lokal versuche (Chrome und Firefox über Apache), erscheint das Dialogfeld nicht bevor die Seite geladen wird. Ich werde Beispielcode in meiner ursprünglichen Frage oben veröffentlichen. –

Wie zeige ich ein Jquery-Dialogfeld an, bevor die gesamte Seite geladen wird?

Antwort

Verwandte Themen