单击时显示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完成后出现。 使用显示和隐藏这两个块，图像不会出现，因此，我尝试删除了隐藏块，我发现问题是：当加载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 */
    });
});

Answer 2

正如Karl所言，最好的方法是不使用ajaxStart/ajaxStop事件处理程序，甚至更好，而不使用jQuery。

 document.querySelector('.get-data').addEventListener('click', function() { document.querySelector('.display-data').textContent = null; document.querySelector('.loading').style.display = 'block'; var request = new XMLHttpRequest(); request.open('GET', 'http://jsonplaceholder.typicode.com/photos', true); request.onload = function() { if (this.status >= 200 && this.status < 400) { // Success! var data = JSON.parse(this.response); document.querySelector('.loading').style.display = 'none'; document.querySelector('.display-data').textContent = JSON.stringify(data[0]); } else { // We reached our target server, but it returned an error document.querySelector('.loading').style.display = 'none'; } }; request.onerror = function() { // There was a connection error of some sort document.querySelector('.loading').style.display = 'none'; }; request.send(); }); 

 <button class="get-data">Get Data</button> <div class="loading" style="display: none"> <img src="https://upload.wikimedia.org/wikipedia/commons/2/28/InternetSlowdown_Day.gif" width="50px"> </div> <div class="display-data"></div> 

Answer 3

最后！ 我在这里发现了问题！ 经过这次修改，我以前尝试过的所有方法现在都可以使用。

只是：

 $("#carregando").show();

要么：

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

要么：

 beforeSend: function() {
                $("#carregando").show();
            },
            complete: function() {
                $("#carregando").hide();
            },

我所有的问题都在这里： http : //prntscr.com/asbxbk ！

因此，我评论说异步工作了！！！

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

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

        $.ajax({    
            url: '/Portaria/AtendOperador',
            dataType: "json",
            type: "GET",
            data: { 'data1': data1, 'data2': data2, 'evento': evento, 'cuc': cuc, 'conta': conta },

            //async: false, COMMENTED!!!           

            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);
            },    
            error: function (xhr) {
                alert('error');
            }
        }); 
});

Answer 4

如果您想为页面上的所有ajax请求显示相同的git，则Karl的答案是正确的

但是，如果您要针对此特定的AJAX执行此操作，请遵循以下步骤

$("#atualiza").click(function () {
        $.ajax({
            beforeSend: function() { $("#carregando").show(); }, //It will show the gif just before sending the request
            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);
                $("#carregando").hide();   //this will hide the gif in case of AJAX success
            },



            error: function (xhr) {
                alert('error');
                $("#carregando").hide();   //this will hide the gif in case of AJAX failure
            }
        });      
});

希望这个能对您有所帮助