GIF加载器图像在ajax调用期间不动画

Question

我显示了DIV元素包含加载器gif图像，同时ajax调用响应被提取。

最初DIV元素将被隐藏，并在点击一个chekbox我显示加载器DIV后ajax调用发生和ajax调用完成后我再次隐藏加载器DIV。

当我显示加载器div图像不动画，它只是作为一个静态图像。

我怎样才能让它变成动画。请建议。

在此先感谢。

下面是代码

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

作为ajax请求是asynchronous加载的被示出，并立即再次藏。使用complete回调ajax来隐藏加载器。

检查以下突出显示的代码：

$('#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 
     } 
    }); 

});