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

设置

让我们从
我将使用的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"); }    
});

而已！每当触发ajaxStartor事件时，我们都会将一些事件附加到 body 元素。ajaxStop当一个 ajax
事件启动时，我们将“加载”类添加到正文中。当事件完成后，我们从主体中删除“加载”类。

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