How to make a GIF image continue moving while working AJAX?

Question

I am trying to add a very simple one loading GIFin my AJAX. I use this animated gif. But the GIF only moves only 0.5-1. Then, after 10 seconds, the AJAX data form will appear.

$('#btn_src').on('click', function (e) {
    $('.loading').show();
    $.ajax({
        type: "POST",
        url: "some_function",
        async: true,
        cache: false,
        dataType: "json",
        data: 'some_var',
        success: function (data) {
            //some data from AJAX success call. 
        },
        complete: function () {
            $('.loading').hide();
            $('#myModal').modal('show'); //This is a modal to display the data from AJAX
        }
    });
});

Current AJAX has this behavior:

• Show GIF
• GIF stopped after switching to 0.1-1 s
• After 10 seconds, a popup will appear. (So, before I see this popup. There is a frozen gif on my screen).

I expected:

• Show GIF
• GIF continues to move (as long as the seconds required to collect data + 1 s)
• Hide GIF
• Show popups

Answer 1

, , . , success. , , ui, . , , ui setInterval, clearInterval . , , setInterval, .

Answer 2

:

  $(document).ajaxStart(function () {            
        $('.loading').show()
    }).ajaxError(function (e, xhr, opts) {
        $('.loading').hide();
    }).ajaxComplete(function (e, xhr, opts) {
        $('.loading').hide();
    }).ajaxStop(function () {
        $('.loading').hide();
    });

beforeSend ajax:

    $('#btn_src').on('click', function (e) {         
        $.ajax({
            type: "POST",
            url: "some_function",
            async: true,
            cache: false,
            dataType: "json",
            data: 'some_var',
            beforeSend: function (msg) {
              $('.loading').show();
            }
            success: function (data) {
                //some data from AJAX success call. 
            },
            complete: function () {
                $('.loading').hide();
                $('#myModal').modal('show'); //This is a modal to display the data from AJAX
            }
        });
    });