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。当请求完成时，它将再次被隐藏。

fontaweesome有一个加载动画图标，可以直接在你的项目中使用，没有任何额外的数据负担，如果你已经在使用字体awesome。

<span id="loading" style="display:none"><i class="fa fa-spinner fa-pulse"></i> PLEASE WAIT </span>

然后是jquery，你可以使用下面的代码来显示隐藏元素。

$(document).ajaxSend(function() {
    $('#loading').show();
});

$(document).ajaxComplete(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。当请求完成时，它将再次被隐藏。

根据https://www.w3schools.com/howto/howto_css_loader.asp，这是一个没有JS的2步过程:

1.在你想要旋转器的地方添加这个HTML: <div class="loader"></div>

2.添加下面的CSS来创建实际的旋转器:

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

我所见过的大多数解决方案都希望我们设计一个加载覆盖，保持隐藏，然后在需要时取消隐藏，或者显示gif或图像等。

我想开发一个健壮的插件，通过jQuery调用，我可以显示加载屏幕，并在任务完成时将其拆除。

下面是代码。它取决于字体awesome和jQuery:

/**
 * Raj: Used basic sources from here: http://jsfiddle.net/eys3d/741/
 **/


(function($){
    // Retain count concept: http://stackoverflow.com/a/2420247/260665
    // Callers should make sure that for every invocation of loadingSpinner method there has to be an equivalent invocation of removeLoadingSpinner
    var retainCount = 0;

    // http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
    $.extend({
        loadingSpinner: function() {
            // add the overlay with loading image to the page
            var over = '<div id="custom-loading-overlay">' +
                '<i id="custom-loading" class="fa fa-spinner fa-spin fa-3x fa-fw" style="font-size:48px; color: #470A68;"></i>'+
                '</div>';
            if (0===retainCount) {
                $(over).appendTo('body');
            }
            retainCount++;
        },
        removeLoadingSpinner: function() {
            retainCount--;
            if (retainCount<=0) {
                $('#custom-loading-overlay').remove();
                retainCount = 0;
            }
        }
    });
}(jQuery)); 

把上面的内容放在一个js文件中，并在整个项目中包含它。

CSS添加:

#custom-loading-overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
#custom-loading {
    width: 50px;
    height: 57px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}

调用:

$.loadingSpinner();
$.removeLoadingSpinner();

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

设置

让我们从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/