在整个页面加载完成前，如何显示一个jQuery对话框框？

Question

在整个页面加载完成前，如何显示一个jQuery对话框框？

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>

- obarshay

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Seb · Accepted Answer

您需要在 <body> 标签后立即运行该代码片段，例如：

<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加载之前加载。通常情况下并非如此，那么它就无法工作。在这种情况下，你需要使用一个纯JavaScript解决方案，例如Lightbox 1或Lightbox 2。