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

发布于 2024-07-15 07:27:18 字数 1239 浏览 4 评论 0原文

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

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

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

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

原文

On my site a number of operations can take a long time to complete.

When I know a page will take a while to load, I would like to display a progress indicator while the page is loading.

Ideally I would like to say something along the lines of:

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

and have that overlay on top of the page that is being loaded (disappearing after the operation is completed).

Coding the progress bar and displaying progress is not an issue, the issue is getting a progress indicator to pop up WHILE the page is being loaded. I have been trying to use JQuery's dialogs for this but they only appear after the page is already loaded.

This has to be a common problem but I am not familiar enough with JavaScript to know the best way to do this.

Here's simple example to illustrate the problem. The code below fails to display the dialog box before the 20 second pause is up. I have tried in Chrome and Firefox.
In fact I don't even see the "Please Wait..." text.

Here's the code I am using:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

偏闹i 2024-07-22 07:27:18

您需要在之后立即运行该代码段。标签，类似于：

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

You'll need to run that piece of code immediately after your <body> tag, something like:

<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 omitted the traditional $(function (){}) because you need this to be loaded as soon as the page is shown, not after the whole DOM is loaded.

I've done this before and works great, even if the page has not finished loading yet.

EDIT: you'll have to be certain the jQuery dialog plugin you're using is loading before your entire DOM loads. Usually this is not the case, you it won't work. In that case, you'll need to use a g'old plain JavaScript solution, such as Lightbox 1 or Lightbox 2.

回复收藏 0 原文

~没有更多了~