如何在加载整个页面之前显示jquery对话框?

时间:2009-03-26 22:15:12

标签: javascript jquery jquery-ui progress-bar

在我的网站上,许多操作可能需要很长时间才能完成。

当我知道页面需要一段时间才能加载时,我想在页面加载时显示进度指示器。

理想情况下,我想说一下:

$("#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>

1 个答案:

答案 0 :(得分:10)

您需要在&lt; body&gt;之后立即运行该段代码标签,如:

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

注意我省略了传统的$(function(){})因为你需要在显示页面时加载它,而不是在加载整个DOM之后加载。

我以前做过这个并且效果很好,即使页面还没有完成加载。

编辑:您必须确定您正在使用的jQuery对话框插件是在整个DOM加载之前加载。通常情况并非如此,你不会工作。在这种情况下,您需要使用g'old普通JavaScript解决方案,例如Lightbox 1Lightbox 2