Comment afficher une boîte de dialogue jquery avant le chargement complet de la page?

Sur mon site, un certain nombre d'opérations peuvent prendre beaucoup de temps à compléter.Comment afficher une boîte de dialogue jquery avant le chargement complet de la page?

Lorsque je sais qu'une page va prendre du temps à se charger, je voudrais afficher un indicateur de progression pendant le chargement de la page.

Idéalement je voudrais dire quelque chose le long des lignes de:

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

et avoir cette superposition en haut de la page qui est en cours de chargement (disparaissant après l'opération est terminée).

Le codage de la barre de progression et l'affichage de la progression ne constituent pas un problème, le problème est d'afficher un indicateur de progression lorsque la page est en cours de chargement. J'ai essayé d'utiliser les boîtes de dialogue de JQuery pour cela mais elles n'apparaissent qu'après le chargement de la page.

Cela doit être un problème courant, mais je ne suis pas assez familier avec JavaScript pour connaître la meilleure façon de le faire.

Voici un exemple simple pour illustrer le problème. Le code ci-dessous ne parvient pas à afficher la boîte de dialogue avant la pause de 20 secondes. J'ai essayé dans Chrome et Firefox. En fait, je ne vois même pas le texte "Please Wait ...".

Voici le code que je utilise:

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

Source

2009-03-26 Oleg Barshay

Vous aurez besoin d'exécuter ce morceau de code immédiatement après votre < body>, quelque chose comme:

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

Remarque J'ai oublié la $ (function() {}) parce que vous avez besoin que cela soit chargé dès que la page est affichée, pas après que le DOM entier soit chargé.

Je l'ai déjà fait et fonctionne très bien, même si la page n'a pas encore fini de se charger.

EDIT: vous devez être certain que le plug-in de dialogue jQuery vous utilisez chargement avant vos charges DOM entières. Habituellement ce n'est pas le cas, vous ne travaillerez pas. Dans ce cas, vous devez utiliser une solution JavaScript simple, telle que Lightbox 1 ou Lightbox 2.

Source

2009-03-26 22:33:37 Seb

+1 Bonne réponse. Battez-moi dessus :) Note: le script jQuery devra être chargé avant que ce code ne s'exécute (évidemment) –

C'est vrai, bon point Josh. Une fois que le fichier jquery.js est mis en cache localement, ce sera juste une question de millisecondes si :) – Seb

Eh bien, il semble que cela devrait fonctionner, mais quand je l'essaie localement (Chrome et Firefox via Apache), la boîte de dialogue ne s'affiche pas avant que la page ne se charge. Je vais poster un exemple de code dans ma question originale ci-dessus. –

Comment afficher une boîte de dialogue jquery avant le chargement complet de la page?

Répondre

Questions connexes