乔纳森出色的解决方案在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)};

除了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();
 });

jQuery为AJAX请求的开始和结束提供了事件钩子。你可以钩入这些来显示你的加载器。

例如，创建以下div:

<div id="spinner">
  <img src="images/spinner.gif" alt="Loading" />
</div>

在样式表中将其设置为display: none。你可以用任何你想要的样式。如果你愿意，你可以在Ajaxload.info上生成一个漂亮的加载图像。

然后，你可以使用下面这样的东西来让它在发送Ajax请求时自动显示:

$(document).ready(function () {

    $('#spinner').bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxComplete", function() {
        $(this).hide();
    });

});

只需在关闭body标签或任何您认为合适的地方之前，将此Javascript块添加到页面的末尾。

现在，无论何时发送Ajax请求，都会显示#spinner div。当请求完成时，它将再次被隐藏。

乔纳森出色的解决方案在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)};

我使用CSS3制作动画

/************ CSS3 *************/ .icon-spin { font-size: 1.5em; display: inline-block; animation: spin1 2s infinite linear; } @keyframes spin1{ 0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)} } /************** CSS3 cross-platform ******************/ .icon-spin-cross-platform { font-size: 1.5em; display: inline-block; -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear; animation: spin2 2s infinite linear; } @keyframes spin2{ 0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)} } @-moz-keyframes spin2{ 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(359deg)} } @-webkit-keyframes spin2{ 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(359deg)} } @-o-keyframes spin2{ 0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(359deg)} } @-ms-keyframes spin2{ 0%{-ms-transform:rotate(0deg)} 100%{-ms-transform:rotate(359deg)} } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-6"> Default CSS3 <span class="glyphicon glyphicon-repeat icon-spin"></span> </div> <div class="col-md-6"> Cross-Platform CSS3 <span class="glyphicon glyphicon-repeat icon-spin-cross-platform"></span> </div> </div>

你可以用不同的方法来做。它可以是页面上的一个小状态，写着“正在加载…”，或者是在加载新数据时，整个元素使页面变灰。下面的方法将向您展示如何实现这两种方法。

设置

让我们从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事件开始时，我们将“loading”类添加到主体中。当事件完成时，我们从主体中删除“loading”类。

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