你可以使用jQuery的。ajax函数，使用它的选项beforeSend，定义一些函数，你可以在其中显示类似loader div的东西，在success选项中，你可以隐藏loader div。

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

你可以有任何旋转Gif图像。下面是一个网站，根据你的配色方案，它是一个很棒的AJAX加载器生成器:http://ajaxload.info/

JavaScript

$.listen('click', '#captcha', function() {
    $('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
    $.get("/captcha/new", null, function(data) {
        $('#captcha-block').html(data);
    }); 
    return false;
});

CSS

#loading { background: url(/image/loading.gif) no-repeat center; }

我认为你是对的。 这种方法太全球化了……

然而，当AJAX调用对页面本身没有影响时，这是一个很好的默认值。(例如后台保存)。(你可以通过传递"global":false来关闭特定的ajax调用-请参阅jquery文档

当AJAX调用是为了刷新页面的一部分时，我希望我的“加载”图像特定于刷新的部分。我想看看哪部分刷新了

想象一下，如果你可以简单地写一些像这样的东西，那该有多酷:

$("#component_to_refresh").ajax( { ... } ); 

这将显示这部分的“加载”。 下面是我写的一个处理“加载”显示的函数，但它是特定于你在ajax中刷新的区域。

首先，让我告诉你如何使用它

<!-- assume you have this HTML and you would like to refresh 
      it / load the content with ajax -->

<span id="email" name="name" class="ajax-loading">
</span>

<!-- then you have the following javascript --> 

$(document).ready(function(){
     $("#email").ajax({'url':"/my/url", load:true, global:false});
 })

这就是它的功能——一个基本的开始，你可以随心所欲地增强它。它非常灵活。

jQuery.fn.ajax = function(options)
{
    var $this = $(this);
    debugger;
    function invokeFunc(func, arguments)
    {
        if ( typeof(func) == "function")
        {
            func( arguments ) ;
        }
    }

    function _think( obj, think )
    {
        if ( think )
        {
            obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
        }
        else
        {
            obj.find(".loading").hide();
        }
    }

    function makeMeThink( think )
    {
        if ( $this.is(".ajax-loading") )
        {
            _think($this,think);
        }
        else
        {
            _think($this, think);
        }
    }

    options = $.extend({}, options); // make options not null - ridiculous, but still.
    // read more about ajax events
    var newoptions = $.extend({
        beforeSend: function()
        {
            invokeFunc(options.beforeSend, null);
            makeMeThink(true);
        },

        complete: function()
        {
            invokeFunc(options.complete);
            makeMeThink(false);
        },
        success:function(result)
        {
            invokeFunc(options.success);
            if ( options.load )
            {
                $this.html(result);
            }
        }

    }, options);

    $.ajax(newoptions);
};

<script>
                $(window).on('beforeunload', function (e) {
                    $("#loader").show();
                });
                $(document).ready(function () {
                    $(window).load(function () {
                        $("#loader").hide();
                    });
                });
            </script>

<div id="loader">
                    <img src="../images/loader.png" 
                         style="width:90px;">
                </div>

你总是可以使用Block UI jQuery插件，它为你做的一切，它甚至在ajax加载时阻塞任何输入的页面。如果这个插件似乎不能正常工作，你可以在这个回答中阅读正确的使用方法。来看看。

$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback