jQuery / JavaScript "Пожалуйста, подождите" окно во время загрузки страницы?
У меня есть две отдельные страницы, которые на самом деле нуждаются в одинаковых функциях, поэтому я объединю их в один вопрос.
Функция, которую я хотел бы, - это модальное окно во время загрузки страницы, но для этих двух страниц различие заключается в том, когда должно появиться это модальное окно с ожидающим текстом.
При входе на страницу А он должен собрать и рассчитать много данных, чтобы время загрузки могло занять некоторое время, прежде чем оно будет готово. Для этой страницы я хотел бы, чтобы знак ожидания появлялся до тех пор, пока страница не закончит загрузку.
PageB это форма. Страница загружается быстро, но когда пользователь нажимает кнопку "Отправить", код выполняет с данными разные действия, поэтому это также может занять некоторое время, и здесь я хотел бы, чтобы при нажатии кнопки "Отправить" появлялся знак ожидания модального JavaScript. Я занимаюсь сбором, проверкой, проверкой и вставкой на одну и ту же страницу PageB, поэтому я не переключаюсь между двумя страницами.
Я исследовал Google и различные страницы jQuery / JavaScript для решения, но я боролся с тем, чтобы оно работало на обоих типах страниц, если это возможно, или иным образом создавало две функции, по одной для каждой страницы.
Я также искал stackru, но вопрос, который в чем-то похож, не совсем то, что я ищу, или я просто не понимаю решения достаточно хорошо.
Любая помощь, предложение или советы будут очень признательны.
душевный
- Местика
2 ответа
Взгляните на диалог jQuery UI - в нем есть все, что вам нужно...
http://jqueryui.com/demos/dialog/
Для страницы А вызовите функцию в <script> пометить в верхней части страницы и закрыть его в $(document).ready() функция
Для pageB вызовите функцию при отправке формы и закройте ее после завершения обработки...
Для страницы A создайте обычный элемент HTML (и CSS), чтобы отобразить индикатор загрузки, а затем скройте его в Javascript по завершении загрузки страницы.
Чтобы страница работала, если Javascript отключен, добавьте элемент с помощью Javascript в начале <body>,