7
私のサイトでは、多くの操作が完了するまでに長い時間がかかることがあります。ページ全体が読み込まれる前にjqueryダイアログボックスを表示するにはどうすればよいですか？
ページが読み込まれるまでに時間がかかることがわかっている場合、ページが読み込まれている間に進行状況インジケータを表示したいと思います。
理想的には私はの線に沿って何か言いたい：
$("#dialog").show("progress.php");
をして読み込まれているページ（操作が完了した後に消える）の上にそのオーバーレイを持っています。
プログレスバーをコーディングして進行状況を表示することは問題ではありませんが、ページがロードされている間にポップアップする進行状況インジケータが表示されています。私はこれに対してJQueryのダイアログを使用しようとしていますが、ページが既にロードされた後にのみ表示されます。
これは一般的な問題ですが、これを実行するための最良の方法を知るにはJavaScriptには慣れていません。
ここに簡単な例を示します。次のコードは、20秒の一時停止が始まる前にダイアログボックスを表示できません。私はChromeとFirefoxで試しました。 実際には、私は「Please Wait ...」というテキストも表示されません。
ここで私が使用していたコードです：私は省略
<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>
注：あなたはすぐにあなたの<体の後のコードのその部分を実行する必要があります
<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良い答えです。注：このコードが実行される前にjQueryスクリプトをロードする必要があります（明らかに） –
そうです、良い点ジョシュ。一度jquery.jsファイルがローカルにキャッシュされると、それはちょうどミリ秒の問題になります:) – Seb
それはうまくいくはずですが、ローカルで試してみると（ChromeとFirefoxのApache経由）、ダイアログボックスがポップアップしませんページが読み込まれる前に上記の私の最初の質問にサンプルコードを掲載します。 –