javascript - 单击时显示 Gif，Ajax 成功后隐藏

Question

我发现很多操作系统帖子都可以解决我的问题，但没有人适合我......

我尝试过:

<div class="ibox-content">                     

    <div id="carregando" class="text-center" style="display:none">
    <img src="~/Imagens/logo.png" />
    </div>

    <div id="container" style="height: 460px; margin: 0 auto"></div>
</div>

我的 JS 在按钮点击时被调用，该按钮调用了如下所示的函数:

$("#atualiza").click(function () {           

    $(document).ajaxStart(function () {
        $("#carregando").show();
    });

        $.ajax({
            url: '/Portaria/AtendOperador',
            dataType: "json",
            type: "GET",
            data: { 'data1': data1, 'data2': data2, 'evento': evento, 'cuc': cuc, 'conta': conta },
            async: false,
            cache: false,
            delay: 15,
            success: function (data) {

                var Categories = new Array();
                var Series = new Array();

                for (var i in data) {
                    Categories.push(data[i].Operador);
                    Series.push(data[i].Fechados);
                }

                var CategArray = JSON.parse(JSON.stringify(Categories));
                atendOperador(CategArray, Series);


                $(document).ajaxStop(function () {
                    $("#carregando").hide();
                });
            },



            error: function (xhr) {
                alert('error');

                $(document).ajaxStop(function () {
                    $("#carregando").hide();
                });

            }
        });      
});


function atendOperador(CategArray, Series) {

    var chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        }   

    });
}

即使我输入了代码:

 $( document ).ajaxStart(function() {
     $( "#carregando" ).show();
 });

图像仅在ajax完成后才出现。使用显示和隐藏这两个 block ，图像没有出现，所以，我尝试删除隐藏 block ，我可以看到问题是:加载ajax时显示和隐藏同时发生，如下所示:

我点击了按钮并注意到发生的情况如下:http://prntscr.com/ars97n

几秒钟后，Ajax 加载数据并一起显示图标和数据:http://prntscr.com/ars9xq

Answer 1

尝试 $("#carregando").hide(); 而不是 $(document).ajaxStop(function ()$("#carregando").hide(); });
编辑:ajaxStart 和 ajaxEnd 是事件处理程序。我认为它们应该在点击功能之外注册。像这样的事情:

$(document).ready(function(){
    $(document).ajaxStart(function () {
        $("#carregando").show();
    });
    $(document).ajaxStop(function () {
        $("#carregando").hide();
    });
    $("#atualiza").click(function () { 
        /* all your code here except for the ajaxStart/ajaxStop portion */
    });
});