GIF 加载程序图像在 ajax 调用期间没有动画

问题描述：

在获取 ajax 调用响应时，我正在显示包含加载程序 gif 图像的 DIV 元素.

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

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

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.

当我显示加载器 div 时，图像没有动画，它只是作为静态图像保留.

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.

提前致谢.

这是代码

HTML

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

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

答

由于 ajax 请求是 asynchronous 加载的显示并立即再次隐藏.使用 ajax 的 complete 回调来隐藏加载器.

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

});

GIF 加载程序图像在 ajax 调用期间没有动画

相关推荐