What a good way to display a loading image until an ajax request is complete?

Question

Right now, he contacts the server every time the user switches "Comments (X)"

I would like to do as soon as the user clicks .info.reply (comments (X)), the ajax loader will only appear until the data is complete and then the loader will disappear.

// 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;
});

What is the right way to do this?

Thank!

Answer 1

Basically

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;
});

Answer 2

, jQuery BlockUI. $.blockUI() $.ajax. success $.unblockUI().