Реализация индикатора загрузки AJAX в Bootstrap Modal

Быстрый ответ

Для того чтобы добавить индикатор загрузки к AJAX-запросам в jQuery, можно использовать метод .ajaxStart(), активирующий его, и метод .ajaxStop(), обеспечивающий его скрытие. Ниже представлен пример с применением CSS-анимации:

<div id="loading" style="display: none;">Загрузка...</div>

<script>
$(document)
  .ajaxStart(function() {
    $("#loading").fadeIn(); // Включаем индикатор в начале запроса
  })
  .ajaxStop(function() {
    $("#loading").fadeOut(); // Выключаем индикатор по завершении запроса
  });

// AJAX-запрос
$.ajax({
  url: "data.php",
  // Остальные параметры запроса
});
</script>

Данный код автоматически включает и выключает индикатор загрузки в соответствии с активностью AJAX-запросов.

Оформление индикатора и учет особенностей

Индикатор загрузки: гармоничное сочетание функциональности и эстетики

Продуманное оформление и расположение индикатора загрузки являются важными. Он должен быть заметным, но не отвлекающим, поэтому центральное размещение с применением CSS будет наиболее удачным выбором.

Подробнее об этом расскажет наш спикер на видео

Информативность – залог удержания внимания

Интерактивный индикатор, например, прогресс-бар от Bootstrap, улучшит пользовательский опыт и сократит воспринимаемое время ожидания.

Бесперебойность работы при возникновении ошибок

Важно обеспечить исчезновение индикатора даже в случае ошибок AJAX-запроса. Это позволяет поддерживать чистоту интерфейса независимо от результатов работы запросов.

$(document).ajaxComplete(function(event, xhr, settings) {
  $("#loading").fadeOut(); // Скрываем индикатор при успешном завершении
}).ajaxError(function(event, xhr, settings, thrownError) {
  $("#loading").hide(); // Прячем индикатор при возникновении ошибки
  alert("Ошибка: " + thrownError);
});

Динамичность обогащает восприятие

Анимации могу значительно улучшить восприятие процесса ожидания. Библиотеки типа Animate.css добавляют динамичности индикаторам загрузки.

Визуализация

Работу AJAX-запроса можно представить как работу баристы, который готовит кофе для клиента:

Покупатель (Пользователь): "Хочу кофе, пожалуйста!"
Бариста (AJAX-запрос): "Сейчас приготовим!"

На протяжении этого процесса (🔄), горит индикатор загрузки "Готовим кофе!" (💡):

$(document).ajaxStart(function() {
  $('#loadingIndicator').fadeIn(); // Индикатор загрузки "кофе готовится"
}).ajaxStop(function() {
  $('#loadingIndicator').fadeOut(); // Индикатор загрузки "кофе готово"
});

Примечание: #loadingIndicator выступает в роли сигнала, информирующего пользователей о том, что запрос в процессе подготовки.

Продвинутые способы отображения загрузки: Улучшаем UX

Индивидуальность — путь к сердцу пользователя

Сервисы, такие как AjaxLoad.info, предлагают настройку дизайна индикаторов в соответствии со стилистикой вашего бренда, что имеет положительное влияние на восприятие интерфейса.

Единообразие во имя удобства

Вы можете использовать глобальные события jQuery, такие как ajaxSend и ajaxComplete, для обеспечения единообразного поведения индикаторов загрузки на все время использования вашего приложения.

Наглядность – залог понимания

Платформы, такие как jsfiddle, позволяют демонстрировать готовые реализации, облегчая понимание механизма и вовлекая пользователей.

UX как приоритет

Следите за тем, чтобы индикатор загрузки был гармонично внедрен в интерфейс: он должен информировать пользователя, не препятствуя при этом использованию ресурса.

Полезные материалы

1. jQuery.ajax() | Документация API jQuery
2. Метод jQuery ajax()
3. Как реализовать Ajax в jQuery – Tutorial Republic
4. Создание анимации "Пожалуйста, подождите, идет загрузка..." с использованием jQuery – Stack Overflow
5. События Ajax | Учебный центр jQuery
6. Анимация иконок | Документация Font Awesome
7. Animate.css | Кроссбраузерная библиотека CSS-анимаций