GIF 加载程序图像在 ajax 调用期间没有动画 [英] GIF Loader image does not animate during ajax call

问题描述

在获取 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>

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

推荐答案

由于 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 调用期间没有动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！