Show Gif on click and Hide after Ajax Success
<p>I found lots os posts with the solution to my problem, but no one works to me...</p>

<p>I tried like:</p>

<pre><code>&lt;div class="ibox-content"&gt;                     

    &lt;div id="carregando" class="text-center" style="display:none"&gt;
    &lt;img src="~/Imagens/logo.png" /&gt;
    &lt;/div&gt;

    &lt;div id="container" style="height: 460px; margin: 0 auto"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My JS is called on a button clink who calls a funcion like bellow:</p>

<pre><code>$("#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'
        }   

    });
}
</code></pre>

<p>Even I put the code:</p>

<pre><code> $( document ).ajaxStart(function() {
     $( "#carregando" ).show();
 });
</code></pre>

<p>The image appear only after ajax finishing. Using the two blocks, show and Hide, the image not appear, so, i tried to remove the hide block and i could see that the problem is: Show and Hide happens together when ajax is loaded like:</p>

<p>I cliked on button and noting happened like: <a href="http://prntscr.com/ars97n" rel="nofollow">http://prntscr.com/ars97n</a></p>

<p>And after few seconds, Ajax load data and show icon and data together: <a href="http://prntscr.com/ars9xq" rel="nofollow">http://prntscr.com/ars9xq</a> </p>