7

私のサイトでは、多くの操作が完了するまでに時間がかかる場合があります。

ページの読み込みに時間がかかることがわかっている場合、ページの読み込み中に進行状況インジケーターを表示したいと考えています。

理想的には、次のようなことを言いたいと思います。

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

ロードされているページの上にそのオーバーレイを配置します（操作が完了すると消えます）。

進行状況バーをコーディングして進行状況を表示することは問題ではありません。問題は、ページの読み込み中に進行状況インジケーターがポップアップすることです。これには JQuery のダイアログを使用しようとしましたが、ページが既に読み込まれた後にのみ表示されます。

これはよくある問題ですが、これを行う最善の方法を知るほど JavaScript に精通していません。

問題を説明する簡単な例を次に示します。以下のコードは、20 秒の一時停止が始まる前にダイアログ ボックスを表示できません。Chrome と Firefox で試しました。実際、「お待ちください...」というテキストすら表示されません。

私が使用しているコードは次のとおりです。

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

1 に答える 1