Как отобразить диалоговое окно jquery перед загрузкой всей страницы?

На моем сайте ряд операций может занять много времени.Как отобразить диалоговое окно jquery перед загрузкой всей страницы?

Когда я знаю, что на загрузку страницы потребуется некоторое время, я хочу отобразить индикатор прогресса во время загрузки страницы.

В идеале я хотел бы сказать что-то вдоль линий:

$("#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>

источник

2009-03-26 Oleg Barshay

Вам нужно запустить этот код сразу после < тела> тег, что-то вроде:

<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.

Я сделал это раньше и отлично работает, даже если страница еще не закончила загрузку.

EDIT: вы должны быть уверены, диалог плагиной JQuery вы используете загружаются перед вашими целыми DOM нагрузки. Обычно это не так, вы не сработаете. В этом случае вам нужно будет использовать g'old plain JavaScript-решение, например Lightbox 1 или Lightbox 2.

источник

2009-03-26 22:33:37 Seb

+1 Хороший ответ. Ударьте меня на него :) Примечание: скрипт jQuery должен быть загружен до того, как этот код выполнит (очевидно) –

Правильно, хороший момент Джош. Как только файл jquery.js будет кэширован локально, это будет всего лишь миллисекунда, хотя :) – Seb

Ну, похоже, что он должен работать, но когда я пытаюсь локально (Chrome и Firefox через Apache), диалоговое окно не открывается перед загрузкой страницы. Я отправлю пример кода в моем первоначальном вопросе выше. –

Как отобразить диалоговое окно jquery перед загрузкой всей страницы?

ответ

Смежные вопросы