Come si visualizza una finestra di dialogo jquery prima che venga caricata l'intera pagina?

Sul mio sito un numero di operazioni può richiedere molto tempo per essere completato.Come si visualizza una finestra di dialogo jquery prima che venga caricata l'intera pagina?

Quando so che una pagina impiegherà un po 'di tempo a caricare, vorrei visualizzare un indicatore di avanzamento mentre la pagina si sta caricando.

Idealmente vorrei dire qualcosa sulla falsariga di:

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

e che hanno sovrapposizione sulla parte superiore della pagina che viene caricata (scomparendo dopo l'operazione è stata completata).

Codificare la barra di avanzamento e visualizzare lo stato di avanzamento non è un problema, il problema è ottenere un indicatore di avanzamento da far apparire mentre la pagina viene caricata. Ho cercato di usare le finestre di dialogo di JQuery per questo, ma appaiono solo dopo che la pagina è già stata caricata.

Questo deve essere un problema comune, ma non ho familiarità con JavaScript per conoscere il modo migliore per farlo.

Ecco un semplice esempio per illustrare il problema. Il codice seguente non riesce a visualizzare la finestra di dialogo prima che la pausa di 20 secondi sia attiva. Ho provato in Chrome e Firefox. Infatti non vedo nemmeno il testo "Please Wait ...".

Ecco il codice che sto usando:

<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>

fonte

2009-03-26 Oleg Barshay

avrete bisogno per eseguire quel pezzo di codice subito dopo il vostro < body>, qualcosa di simile:

<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>

Nota ho omesso il tradizionale $ (function() {}) perché è necessario caricarlo non appena viene mostrata la pagina, non dopo aver caricato l'intero DOM.

L'ho già fatto e funziona benissimo, anche se la pagina non ha ancora finito di caricare.

EDIT: dovrete essere certi finestra di plugin per jQuery che si sta utilizzando sta caricando prima vostro intero carichi DOM. Di solito questo non è il caso, non funzionerà. In tal caso, dovrai utilizzare una soluzione JavaScript semplice, come ad esempio Lightbox 1 o Lightbox 2.

fonte

2009-03-26 22:33:37 Seb

+1 Buona risposta. Fatemi caso :) Nota: lo script jQuery dovrà essere caricato prima dell'esecuzione di questo codice (ovviamente) –

Esatto, buon punto Josh. Una volta che il file jquery.js è memorizzato nella cache localmente, sarà solo questione di millisecondi :) – Seb

Beh, sembra che dovrebbe funzionare ma quando lo provo localmente (Chrome e Firefox attraverso Apache), la finestra di dialogo non viene visualizzata prima che la pagina venga caricata. Inserirò codice di esempio nella mia domanda originale sopra. –

Come si visualizza una finestra di dialogo jquery prima che venga caricata l'intera pagina?

risposta

Problemi correlati