GIF Loader image does not animate during ajax call

Question

I am showing DIV element consisting a loader gif image while ajax call response is fetched.

Initially DIV element will be hidden and on the click of a chekbox i am showing the loader DIV later ajax call happens and after ajax call is completed i am hiding loader DIV again.

When i show the loader div the image does not animate, it just remains as a static image.

how can i make it animate. please suggest.

Thanks in advance.

Here is the code

HTML

<div id="loading" style="display:none;"><img src="images/379.GIF"/></div>

JS

$('#checkqar').on('click', function() {
    $("#loading").css("display", "block");
    $.ajax({
        type: "GET",
        url: "http://sss.com/eee",
        crossDomain: true,
        jsonpCallback: 'callback',
        contentType: "application/json; charset=utf-8",
        dataType: "jsonp",
        success: function(msg) {
            //do something
        }
    });

    $("#loading").css("display", "none");
});

Answer 1

As ajax request is asynchronous the loaded is shown and hid again immediately. Use complete callback of ajax to hide the loader.

Check the highlighted code below:

$('#checkqar').on('click', function() {
    $("#loading").css("display", "block");
    $.ajax({
        type: "GET",
        url: "http://sss.com/eee",
        crossDomain: true,
        jsonpCallback: 'callback',
        contentType: "application/json; charset=utf-8",
        dataType: "jsonp",
        success: function(msg) {
            //do something
        },
        complete: function() {
            $("#loading").css("display", "none");
            // Use it here
        }
    });

});