在Ajax调用期间，GIF加载器图像不会动画 [英] GIF Loader image does not animate during ajax call

问题描述

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

当我显示加载程序div图像不动画，它只是仍然是一个静态图像。

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

预先感谢。

以下是代码

HTML

 < div id =loadingstyle =display：none;><<< ; img src =images / 379.GIF/>< / div> 
  

JS

 <$ （'click'，function（）{
 $（＃loading）。css（display，block）; 
 $（'＃checkqar'）。 .ajax（{
类型：GET，
 url：http://sss.com/eee，
 crossDomain：true，
 jsonpCallback：'callback'， 
 contentType：application / json; charset = utf-8，
 dataType：jsonp，
成功：函数（msg）{$ b $ //做某事
} 
}）; 
 
 $（＃loading）。css（display，none）; 
}）; 
  

解决方案 ajax 请求是异步加载显示并立即再次隐藏。使用 complete ajax 的回调来隐藏加载器。

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

  $（'＃checkqar'）。on（'click'，function（）{
 $（＃loading）.css（display，block）; 
 $ .ajax（{
类型：GET，
 url：http： 
 crossDomain：true，
 jsonpCallback：'callback'，
 contentType：application / json; charset = utf-8，
 dataType ：jsonp，
成功：函数（msg）{
 //做某事
}，
完成：function（）{
 $（＃loading ）.css（display，none）; 
 //在这里使用
} 
}）; 
 
}）; 
  

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

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.

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.

Thanks in advance.

Here is the code

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

解决方案

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

});

这篇关于在Ajax调用期间，GIF加载器图像不会动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！