Geek Answers Handbook

How to display jquery dialog before loading the whole page?

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

When I know that it takes some time to load a page, I would like to display a progress indicator while the page is loading.

Ideally, I would like to say something like:

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

and have this overlay on top of the loaded page (disappears after the operation is completed).

Encoding a progress bar and displaying progress is not a problem; the problem is getting a progress bar to pop up while the page is loading. I am trying to use jQuery dialogs for this, but they only appear after the page is already loaded.

This should be a common problem, but I'm not good enough in JavaScript to learn how to do this.

Here is a simple example to illustrate the problem. The code below does not display a dialog box up to a 20 second pause. I tried in Chrome and Firefox. Actually, I don’t even see the text "Please wait ...".

Here is the code I'm 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>
+7
javascript jquery jquery-ui progress-bar
source share
1 answer

You will need to run this piece of code right after your tag

, eg:
 <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 $ (function () {}) because you need it to load immediately after the page is displayed, and not after loading the entire DOM.

I have done this before and it works fine even if the page has not finished loading.

EDIT: you will need to make sure that the jQuery dialog plugin that you use is loaded before loading your entire DOM. This is usually not the case; you will not work. In this case, you need to use the g'old plain JavaScript solution, for example Lightboxes 1 or Lightbox 2 .

+10
source share

More articles:


All Articles