你可以用各种不同的方式来做到这一点。它可能是微妙的，比如页面上的一个小状态说“正在加载...”，或者像在加载新数据时整个元素使页面变灰一样响亮。我在下面采用的方法将向您展示如何完成这两种方法。

设置

让我们首先从http://ajaxload.info获取一个不错的“加载”动画 我将使用

让我们创建一个可以在任何时候发出 ajax 请求时显示/隐藏的元素：

<div class="modal"><!-- Place at bottom of page --></div>

CSS

接下来让我们给它一些天赋：

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

最后，jQuery

好的，继续使用 jQuery。下一部分实际上非常简单：

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

而已！我们在触发ajaxStart或ajaxStop事件时将一些事件附加到 body 元素。当 ajax 事件开始时，我们将“加载”类添加到主体中。当事件完成时，我们从主体中删除“加载”类。

看到它在行动：http : //jsfiddle.net/VpDUG/4952/

至于实际加载图像，请查看此站点以获取大量选项。

至于在请求开始时显示带有此图像的 DIV，您有几个选择：

A) 手动显示和隐藏图像：

$('#form').submit(function() {
    $('#wait').show();
    $.post('/whatever.php', function() {
        $('#wait').hide();
    });
    return false;
});

B) 使用ajaxStart和ajaxComplete：

$('#wait').ajaxStart(function() {
    $(this).show();
}).ajaxComplete(function() {
    $(this).hide();
});

使用此元素将显示/隐藏任何请求。可好可坏，视需要而定。

C) 对特定请求使用单独的回调：

$('#form').submit(function() {
    $.ajax({
        url: '/whatever.php',
        beforeSend: function() { $('#wait').show(); },
        complete: function() { $('#wait').hide(); }
    });
    return false;
});

除了 Jonathan 和 Samir 建议的内容（顺便说一句，这两个都是很好的答案！），jQuery 有一些内置事件，在发出 ajax 请求时会触发这些事件。

有ajaxStart活动

每当 AJAX 请求开始时显示加载消息（并且没有一个已经处于活动状态）。

...这是兄弟，ajaxStop事件

附加要在所有 AJAX 请求结束时执行的函数。这是一个 Ajax 事件。

当页面上的任何位置发生任何 ajax 活动时，它们一起提供了一种显示进度消息的好方法。

HTML：

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>

脚本：

$(document).ajaxStart(function(){
    $('#loading').show();
 }).ajaxStop(function(){
    $('#loading').hide();
 });

您可以从Ajaxload获取一个旋转圆圈的动画 GIF - 将其粘贴在您网站文件层次结构中的某个位置。然后您只需要添加一个带有正确代码的 HTML 元素，并在完成后将其删除。这相当简单：

function showLoadingImage() {
    $('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}

function hideLoadingImage() {
    $('#loading-image').remove();
}

然后，您只需要在 AJAX 调用中使用这些方法：

$.load(
     'http://example.com/myurl',
     { 'random': 'data': 1: 2, 'dwarfs': 7},
     function (responseText, textStatus, XMLHttpRequest) {
         hideLoadingImage();
     }
);

// this will be run immediately after the AJAX call has been made,
// not when it completes.
showLoadingImage();

这有一些警告：首先，如果您有两个或更多可以显示加载图像的位置，您将需要以某种方式跟踪同时运行的调用数量，并且仅在它们出现时隐藏全做完了。这可以使用一个简单的计数器来完成，它几乎适用于所有情况。

其次，这只会在成功的 AJAX 调用中隐藏加载图像。为了处理错误状态，你需要考虑$.ajax，这是比较复杂$.load，$.get之类的，但很多更灵活了。

Jonathon 的优秀解决方案在 IE8 中中断（动画根本不显示）。要解决此问题，请将 CSS 更改为：

.modal {
display:    none;
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
background: rgba( 255, 255, 255, .8 ) 
            url('http://i.stack.imgur.com/FhHRx.gif') 
            50% 50% 
            no-repeat;
opacity: 0.80;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
filter: alpha(opacity = 80)};