快捷導(dǎo)航

jQuery Ajax 加載數(shù)據(jù)時(shí)異步顯示加載動(dòng)畫

更新時(shí)間：2016年08月01日 11:54:21 作者：勿勿

這篇文章主要介紹了jQuery Ajax 加載數(shù)據(jù)時(shí)異步顯示加載動(dòng)畫的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

ajax加載后臺(tái)數(shù)據(jù)就不說的那么細(xì)了。

看下面代碼首先前臺(tái)上放置代碼

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

在js腳本文件中首先把這個(gè)圖片動(dòng)畫隱藏

代碼如下

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

然后異步ajax提交請(qǐng)求代碼如下

$(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,

當(dāng)點(diǎn)擊queryBtn按鈕的時(shí)候就調(diào)用動(dòng)畫顯示

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

然后提交請(qǐng)求

等收到請(qǐng)求后就

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

效果如下：

以上所述是小編給大家介紹的jQuery Ajax 加載數(shù)據(jù)時(shí)異步顯示加載動(dòng)畫，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

EasyUI為Numberbox添加blur事件的方法
這篇文章主要介紹了EasyUI為Numberbox添加blur事件的方法 ,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
jquery+Ajax實(shí)現(xiàn)簡單分頁條效果
這篇文章主要為大家詳細(xì)介紹了jquery+Ajax實(shí)現(xiàn)簡單分頁條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
原生js和jQuery寫的網(wǎng)頁選項(xiàng)卡特效對(duì)比
本文實(shí)例中主要是通過判斷點(diǎn)擊菜單在菜單列表中的索引位置來顯示或隱藏選項(xiàng)區(qū).原生js還有很多種實(shí)現(xiàn)方法(藍(lán)色理想中搜索),為了與jQ版思路保持一致,本文實(shí)例用的是循環(huán)判斷.有需要的小伙伴可以參考下
2015-04-04
jQuery Validate 驗(yàn)證,校驗(yàn)規(guī)則寫在控件中的具體實(shí)例
本篇文章主要是對(duì)jQuery Validate 驗(yàn)證,校驗(yàn)規(guī)則寫在控件中的具體實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
jquery animate動(dòng)畫持續(xù)運(yùn)動(dòng)的實(shí)例
下面小編就為大家分享一篇jquery animate動(dòng)畫持續(xù)運(yùn)動(dòng)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2017-11-11
七個(gè)不允許錯(cuò)過的jQuery小技巧
這篇文章主要介紹了七個(gè)不允許錯(cuò)過的jQuery小技巧，幫助WEB開發(fā)人員開發(fā)出有創(chuàng)意和漂亮的WEB頁面,需要的朋友可以參考下
2015-12-12
easyui中combotree循環(huán)獲取父節(jié)點(diǎn)至根節(jié)點(diǎn)并輸出路徑實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猠asyui中combotree循環(huán)獲取父節(jié)點(diǎn)至根節(jié)點(diǎn)并輸出路徑實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
jQuery增加自定義函數(shù)的方法
這篇文章主要介紹了jQuery增加自定義函數(shù)的方法,通過簡單的樣式添加為例分析了jquery增加自定義函數(shù)的實(shí)現(xiàn)技巧,非常簡單實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
基于jquery的textarea發(fā)布框限制文字字?jǐn)?shù)輸入(添加中文識(shí)別)
基于jquery的textarea發(fā)布框限制文字字?jǐn)?shù)輸入(添加中文識(shí)別),需要的朋友可以參考下
2012-02-02
JQuery擴(kuò)展插件Validate—6 radio、checkbox、select的驗(yàn)證
radio、checkbox、select的驗(yàn)證其實(shí)方法與前面提到?jīng)]有太大的區(qū)別，但問題是錯(cuò)誤信息會(huì)顯示在同一組的第一個(gè)元素后面
2011-09-09