Comment afficher une boîte de dialogue jquery avant que la page entière est chargée?

StackOverflow https://stackoverflow.com/questions/687767

Question

Sur mon site un certain nombre d'opérations peut prendre beaucoup de temps.

Quand je sais une page prendra un certain temps à charger, je voudrais afficher un indicateur de progression pendant le chargement.

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

Coding la barre de progression et l'affichage des progrès ne sont pas un problème, la question devient un indicateur de progression pour faire apparaître pendant le chargement. J'ai essayé d'utiliser les boîtes de dialogue de JQuery pour cela, mais ils apparaissent seulement après que la page est déjà chargée.

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

Voici exemple simple pour illustrer le problème. Le code échoue ci-dessous pour afficher la boîte de dialogue avant la pause de 20 secondes est écoulé. Je l'ai essayé dans Chrome et Firefox. En fait, je ne vois même pas le texte « S'il vous plaît patienter ... ».

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>
Était-ce utile?

La solution

Vous devez exécuter ce morceau de code immédiatement après votre balise , 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>

Note I a omis les $ traditionnels (function () {}) parce que vous avez besoin de ce à charger dès que la page est affichée, pas après est chargé tout le DOM.

Je l'ai fait avant et fonctionne très bien, même si la page n'a pas encore terminé le chargement.

EDIT: vous devez être certain que le plug-in de dialogue jQuery vous utilisez chargement avant vos charges DOM entières. En général, ce n'est pas le cas, vous il ne fonctionnera pas. Dans ce cas, vous aurez besoin d'utiliser une solution JavaScript plaine g'old, comme Lightbox 1 ou ma 2 .

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top