jQuery Ajax加载中提示 加载数据时异步显示加载中动画

首先是前端页面代码，在页面上需要显示加载中图片的位置放上代码：

<div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;">
　　<img alt="加载中..." src="images/loading.gif"/>
</div>

loading.gif可以百度搜图找一个好看的，自己放在目录下

接下来是js脚本

首先把这个图片动画隐藏

代码如下

$(document).ready(function () { $("#loadgif").hide();});

这个代码可以直接放在JS文件的最开始的地方。如果是直接放在页面中的JS代码，可以直接放在<script type="text/javascript">
语句下面

然后异步ajax提交请求代码如下

$(function () {
var find = new Find();
//alert(find.Template);
$.ajaxSetup({
cache: false,
async: true,
global: false,
type: "POST"
});
$("#queryBtn").click(function () {
 $("#loadgif").show(); find.Get() 
 
});

.....................

注意:

async: true,

当点击queryBtn按钮的时候就调用动画显示，一般是放在$("#btn").click(function ()  {里面

$("#loadgif").show();

然后提交请求

等收到请求后就，一般是放在success:function(result) {  里面

$("#loadgif").hide();

效果如下：

以上所述就是jQuery Ajax 加载数据时异步显示加载动画的方法

我再提供一个我们实际在应用的代码段，这个代码我们应用在读取路由追踪信息功能，详见https://tool.bnxb.com/traceroute

<script type="text/javascript">  
$(document).ready(function () { $("#loadgif").hide();});

$(function () {

$("#btn").click(function ()  {

$("#loadgif").show();

$("#tabletd").empty();

$("#routehtml").empty();

 

var tabletd = "<li class='a'>序号</li><li class='b'>IP地址</li><li class='c'>地区</li><li class='d'>延时</li>";

$("#tabletd").append(tabletd);

var urlinput = $("#url").val();

var hostspace = $("#select_k1").val();

var hostspacename = $("#select_k1").find("option:selected").text();

var hostspaceurl = "curl.php?hosturl=http://" + hostspace + ".bnxb.com/curl/iframe.php&domain=" + urlinput;

alert ("将从" + hostspacename + "读取到" + urlinput + "的路由信息" + hostspaceurl);

$.ajax({  
        async: true,
        url:hostspaceurl,  

        dataType:'jsonp',  

        data:'',  

        jsonp:'callback',  

        

        success:function(result) {  

        

        

//循环取数开始

$.each(result,function(index,obj){    



routeip = obj["ip"];

routeaddr = obj["addr"];

routetime = obj["time"];

routeno = obj["no"];

var routehtml = "<ul><li class='a'>" + routeno + "</li>" + "<li class='b'>" + routeip + "</li>" + "<li class='c'>" + routeaddr + "</li>" + "<li class='d'>" + routetime + "ms</li></ul>";



//输出到页面



        $("#routehtml").append(routehtml);



//输出到页面完成



});

$("#loadgif").hide();        

//循环取数结束    



        },  

        timeout:30000  

    });  

    

    

});

});    

</script>