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 
     } 
    }); 

});