¿Cómo visualizo un cuadro de diálogo jquery antes de cargar toda la página?

En mi sitio, una serie de operaciones puede tomar mucho tiempo para completarse.¿Cómo visualizo un cuadro de diálogo jquery antes de cargar toda la página?

Cuando sé que una página tardará un poco en cargarse, me gustaría mostrar un indicador de progreso mientras se carga la página.

Idealmente me gustaría decir algo a lo largo de las líneas de:

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

y tener esa capa en la parte superior de la página que se está cargando (desapareciendo después de la operación se ha completado).

Codificando la barra de progreso y mostrando el progreso no es un problema, el problema es conseguir que aparezca un indicador de progreso MIENTRAS la página se está cargando. He intentado usar los cuadros de diálogo de JQuery para esto, pero solo aparecen después de que la página ya está cargada.

Esto tiene que ser un problema común, pero no estoy lo suficientemente familiarizado con JavaScript para saber la mejor manera de hacerlo.

Aquí hay un ejemplo simple para ilustrar el problema. El siguiente código no muestra el cuadro de diálogo antes de que finalice la pausa de 20 segundos. Lo he intentado en Chrome y Firefox. De hecho, ni siquiera veo el texto "Por favor, espere ...".

Aquí está el código que estoy utilizando:

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

Fuente

2009-03-26 Oleg Barshay

que necesitará para ejecutar ese trozo de código inmediatamente después de su < body>, algo así como:

<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 omití la $ (función() {}) tradicional porque necesita que esto se cargue tan pronto como se muestre la página, no después de que se haya cargado todo el DOM.

He hecho esto antes y funciona muy bien, incluso si la página no ha terminado de cargarse todavía.

EDIT: que tendrá que estar seguro de que el plugin de diálogo jQuery que está utilizando está cargando antes sus cargas enteras DOM. Por lo general, este no es el caso, no funcionará. En ese caso, deberá usar una solución de JavaScript simple como gold, como Lightbox 1 o Lightbox 2.

Fuente

2009-03-26 22:33:37 Seb

+1 Buena respuesta. Muéstremelo :) Nota: la secuencia de comandos de jQuery tendrá que cargarse antes de que se ejecute este código (obviamente) –

Correcto, buen punto Josh. Una vez que el archivo jquery.js se almacena en caché localmente, será solo una cuestión de milisegundos :) – Seb

Bueno, parece que debería funcionar, pero cuando lo intento localmente (Chrome y Firefox a través de Apache), el cuadro de diálogo no aparece antes de que la página se cargue Publicaré el código de muestra en mi pregunta original anterior. –

¿Cómo visualizo un cuadro de diálogo jquery antes de cargar toda la página?

Respuesta

Cuestiones relacionadas