How do I display a jquery dialog box before the entire page is loaded?

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/687767/how-do-i-display-a-jquery-dialog-box-before-the-entire-page-is-loaded

标签

javascript

jquery

jquery-ui

progress-bar