在 ajax 查询完成之前显示加载图像的好方法是什么？答案

【问题标题】：What's a good way to display a loading image until an ajax query completes?在 ajax 查询完成之前显示加载图像的好方法是什么？
【发布时间】：2010-10-16 00:58:21
【问题描述】：

现在每次用户切换“评论 (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;
});

这样做的正确方法是什么？

谢谢！

【问题讨论】：

标签： javascript ajax jquery jquery-load

【解决方案1】：

基本上

使用 show() 或 fadeIn() 或任何你喜欢的东西在 mousedown 上显示图像，然后将其隐藏在你的成功回调中。 像这样

$('.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;
});

【讨论】：

【解决方案2】：

您可以使用诸如jQuery BlockUI 之类的插件来执行此操作。只需在致电$.ajax 之前致电$.blockUI()。然后在success 事件结束时，调用$.unblockUI()。

【讨论】：