jQuery Ajax 載入資料時非同步顯示載入動畫_jquery

 ajax載入後台資料就不說的那麼細了。

看下面代碼首先前台上放置代碼

<div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;">　　<img alt="載入中..." src="../../Images/loading1.gif"/></div>

在js指令檔中首先把這個圖片動畫隱藏

代碼如下

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

然後非同步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按鈕的時候就調用動畫顯示

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

然後提交請求

等收到請求後就

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

效果如下：

以上所述是小編給大家介紹的jQuery Ajax 載入資料時非同步顯示載入動畫，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！