Отображение загружаемого изображения во время асинхронных запросов

Выполнение асинхронных запросов с использованием $.ajax может привести к путанице из-за отсутствия видимого указания продолжающийся процесс. В этой статье рассматриваются методы отображения изображения загрузки во время таких запросов.

Начнем с того, что предоставленный фрагмент кода выполняет асинхронный запрос к URL-адресу и добавляет полученный HTML-код к элементу с классом «info». Чтобы отобразить изображение загрузки, можно использовать элемент изображения с идентификатором «loading-image».

Один из подходов — показать изображение перед отправкой запроса и скрыть его после завершения:

$('#loading-image').show();
$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
  complete: function(){
    $('#loading-image').hide();
  }
});

Более общий подход — привязать изображение загрузки к глобальным событиям ajaxStart и ajaxStop. Таким образом, изображение будет видно для всех асинхронных запросов:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

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