title: How do I display a jquery dialog box before the entire page is loaded?
body: <p>On my site a number of operations can take a long time to complete. </p>
  
  <p>When I know a page will take a while to load, I would like to display a progress indicator while the page is loading.  </p>
  
  <p>Ideally I would like to say something along the lines of:</p>
  
  <pre><code>$("#dialog").show("progress.php");
  </code></pre>
  
  <p>and have that overlay on top of the page that is being loaded (disappearing after the operation is completed).</p>
  
  <p>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.  </p>
  
  <p>This has to be a common problem but I am not familiar enough with JavaScript to know the best way to do this.</p>
  
  <p>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.</p>
  
  <p>Here's the code I am using:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /&gt;
      &lt;script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="please-wait"&gt;My Dialog&lt;/div&gt;
      &lt;script type="text/javascript"&gt;
        $("#please-wait").dialog();
      &lt;/script&gt;
      &lt;?php
      flush();
      echo "Waiting...";
      sleep(20);
      ?&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>