Какой хороший способ отобразить загрузочное изображение до завершения запроса ajax? - PullRequest
Новая
       12

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

3 голосов
/ 16 октября 2010

Прямо сейчас он связывается с сервером каждый раз, когда пользователь переключает «Комментарии (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;
});

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

Спасибо!

Ответы [ 2 ]

7 голосов
/ 16 октября 2010

В основном

Покажите изображение в mousedown, используя show () или 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;
});
3 голосов
/ 16 октября 2010

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

...