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

【问题标题】：How do I display a jquery dialog box before the entire page is loaded?如何在加载整个页面之前显示 jquery 对话框？
【发布时间】：2009-03-26 22:15:12
【问题描述】：

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

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

理想情况下，我想说的是：

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

【问题讨论】：

标签： javascript jquery jquery-ui progress-bar

【解决方案1】：

您需要在

标记之后立即运行那段代码，例如：

<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 1 或 Lightbox 2。

【讨论】：

+1 好答案。打败我 :) 注意：必须在执行此代码之前加载 jQuery 脚本（显然）
是的，乔什说得好。一旦 jquery.js 文件在本地缓存，这将只是几毫秒的问题:)
嗯，它似乎应该可以工作，但是当我在本地尝试（Chrome 和 Firefox 通过 Apache）时，在页面加载之前无法弹出对话框。我将在上面的原始问题中发布示例代码。
我刚刚更新了我的答案。见最后一段；这可能会给你你正在寻找的最终答案。
您的编辑意味着我获取和处理 JQuery 脚本需要超过 20 秒的时间？即使我将睡眠设置为 100 秒，对话框仍然无法显示。