如何在加载整个页面之前显示jquery对话框？ [英] 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).
编码进度条并显示进度不是问题，问题是在加载页面时弹出进度指示器。我一直在尝试使用JQuery的对话框，但它们只在页面已经加载后出现。
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.
这必须是一个常见的问题，但我不熟悉JavaScript，知道最好的方法。
This has to be a common problem but I am not familiar enough with JavaScript to know the best way to do this.
这是一个简单的例子来说明问题。在20秒暂停之前，下面的代码无法显示对话框。我曾尝试使用Chrome和Firefox。
实际上我甚至没有看到Please Wait ...文本。
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>
推荐答案
您需要立即运行该段代码在< body>标记之后，例如：
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>
注意我省略了传统的$（function（）{}），因为你需要将其加载为一旦显示页面，就不会在整个DOM加载之后。
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.
编辑：你必须确定你正在使用的jQuery对话框插件是在之前加载整个DOM加载。通常情况并非如此，你不会工作。在这种情况下，您需要使用一个简单的JavaScript解决方案，例如 Lightbox 1 或 Lightbox 2 。
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.
这篇关于如何在加载整个页面之前显示jquery对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
