在ajax調用期間，GIF加載程序圖像未設置動畫

Question

我正在顯示在提取ajax調用響應時由加載器gif圖像組成的DIV元素。

最初，DIV元素將被隱藏，在單擊復選框時，我將顯示加載程序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的，因此顯示加載並立即再次隱藏。 使用ajax complete回調來隱藏加載程序。

檢查以下突出顯示的代碼：

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

});