Como exibir uma caixa de diálogo jquery antes que a página inteira seja carregad
No meu site, várias operações podem levar muito tempo para serem concluída
Quando sei que uma página levará um tempo para carregar, eu gostaria de exibir um indicador de progresso enquanto a página estiver carregando.
Ideally, eu gostaria de dizer algo com
$("#dialog").show("progress.php");
e coloque essa sobreposição na parte superior da página que está sendo carregada (desaparecendo após a conclusão da operação
Codificar a barra de progresso e exibir progresso não é um problema, o problema está recebendo um indicador de progresso enquanto a página está sendo carregada. Eu tenho tentado usar as caixas de diálogo do JQuery para isso, mas elas só aparecem depois que a página já está carregad
Este deve ser um problema comum, mas não estou familiarizado o suficiente com JavaScript para saber a melhor maneira de fazer iss
Aqui está um exemplo simples para ilustrar o problema. O código abaixo falha ao exibir a caixa de diálogo antes da pausa de 20 segundos. Eu tentei no Chrome e Firefox. Na verdade, eu nem vejo o texto "Aguarde ...".
Aqui está o código que estou usando:
<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>