Как показать модальную загрузку... пока выполняется запрос ajax $.get/$. post?

У меня есть веб-приложение в asp.net, mvc, и иногда мой запрос ajax может занять более 1 секунды.

Поэтому мне нужно показать большой div по всей странице (Загрузка...), пока этот запрос работает и скрыть его, когда он закончил.

Кто-нибудь знает, как это сделать?

Ответ 1

Я использую плагин jQuery throbber: http://www.jquery-plugins.info/throbber-aka-loading-animation-00015440.htm

Это довольно просто и легко интегрируется. Может выполняться вручную и может быть автоматически подключен к событиям ajax.

Ответ 2

Для jQuery AJAX ознакомьтесь с документацией API: http://api.jquery.com/category/ajax/

Для блокировки экрана проверьте этот плагин: http://malsup.com/jquery/block/#

Демо-страница этого сайта (http://malsup.com/jquery/block/#demos) даст вам представление о том, как его использовать.

Ответ 3

Кроме того, проверьте плагин Dialog из библиотеки JQuery UI. Это позволит вам отображать диалоговое окно, содержащее любое сообщение "Пожалуйста, подождите", которое вы хотите, а также блокирует остальную часть страницы, чтобы гарантировать, что пользователь не может с ней взаимодействовать. Диалоговое окно может быть удалено при завершении операции AJAX.

Вы даже можете сделать это общее, связав события .ajaxStart и .ajaxStop, чтобы автоматически отображать/скрывать диалог для всех операций AJAX.