Каков хороший способ отображения изображения загрузки до тех пор, пока не будет завершен запрос ajax?

Question

Прямо сейчас он контактирует с сервером каждый раз, когда пользователь переключается «Комментарии (X)»

Я бы хотел сделать так, как только пользователь нажмет «.info .reply» (Комментарии (X)), загрузчик ajax появляется только до тех пор, пока данные не будут загружены, тогда загрузчик исчезнет.

// Replies - Toggle display of comments 
$('.info .reply').click(function() { 
    $('.reply', this.parentNode.parentNode).toggle(); 
    return false; 
}); 

// Load comments 
$('.info .reply', this).mousedown(function() { 
    var id = $('form #id', this.parentNode.parentNode).val(); 
    $.ajax({ url: location.href, type: 'post', data: 'id=' + id, dataType: 'json', 
     success: function(data) { 
      for (var i in data) { 
       // Do AJAX Updates 
      } 
     } 
    }); 
    return false; 
}); 

Каков правильный способ сделать это?

Спасибо!

Answer 1

В основном

Показать изображение на MouseDown с помощью шоу() или FadeIn() или что-то щекочет ваше воображение, а затем скрыть его внутри Вашего успеха обратного вызова.

$('.info .reply', this).mousedown(function() { 
    $("#loading-image").show(); // Show the progress indicator 
    var id = $('form #id', this.parentNode.parentNode).val(); 
    $.ajax({ url: location.href, type: 'post', data: 'id=' + id, dataType: 'json', 
     success: function(data) { 
      $("#loading-image").hide(); // Hide the progress indicator 
      for (var i in data) { 
       // Do AJAX Updates 
      } 
     } 
    }); 
    return false; 
}); 

Answer 2

Для этого вы можете использовать плагин, такой как jQuery BlockUI. Просто позвоните $.blockUI() перед вызовом $.ajax. Затем в конце события success вызовите $.unblockUI().