На моем сайте ряд операций может занять много времени.
Когда я знаю, что загрузка страницы займет некоторое время, я хотел бы отобразить индикатор выполнения во время загрузки страницы.
В идеале я хотел бы сказать что-то вроде:
$("#dialog").show("progress.php");
и наложение на верхней части загружаемой страницы (исчезает после завершения операции).
Кодирование индикатора выполнения и отображение хода выполнения не является проблемой, проблема заключается в том, что индикатор хода выполнения появляется во время загрузки страницы. Я пытался использовать диалоги JQuery для этого, но они появляются только после того, как страница уже загружена.
Это должно быть распространенной проблемой, но я недостаточно знаком с JavaScript, чтобы знать, как лучше всего это сделать.
Вот простой пример, иллюстрирующий проблему. Приведенный ниже код не отображает диалоговое окно до истечения 20-секундной паузы. Я пробовал в Chrome и Firefox.
На самом деле я даже не вижу текст «Пожалуйста, подождите ...».
Вот код, который я использую:
<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>