關於Ajax返回資料之前的loading等待效果實現方法

我們都知道在我們載入一些頁面的時候。會出現等待loading頁面，我們通過ajax請求，向後台傳遞參數，然後後台經過一系列的運算之後向前台返還資料，我希望在等待資料成功返還之前可以展示一個loading.gif圖。接下來通過本文給大家分享Ajax返回資料之前的loading等待效果,需要的朋友可以參考下。

不廢話，在頁面上執行點擊事件（<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build(this)">產生</a>）

調用下面方法：

function build(sender) {  var jqSender = $(sender);  var sceneid = jqSender.attr('sceneid');  $.ajax({   type: 'post',   url: "Follow/UpdateUrl",   data: { sceneid: sceneid },   beforeSend: function () {    jqSender.hide().after('<img id="load" src="/images/load.gif" />');   },   success: function (data) {    //根據id和class擷取td標籤    $('tbody tr[id=' + sceneid + '] td.wxurl-col').html(data.QRUrl);    $('tbody tr[id=' + sceneid + '] td.localkey-col').html(data.LocalKey);    //隱藏產生按鈕，插入圖片    var localkey = data.LocalKey;    jqSender.after('<img src="/image/' + localkey + '" />');   },   complete: function () {    $('#load').remove();   }  }); }

後台頁面就不寫了，url中配置了傳遞到背景路徑，最主要的就是

beforeSend: function () { jqSender.hide().after('<img id="load" src="/images/load.gif" />'); },

這要考慮到ajax非同步請求的特點，當ajax執行到url的時候，會有一個線程跳轉到後台去執行，

瀏覽器會增加一個線程（不知道這麼說標不標準）繼續執行後面的程式，到success: function (data)暫停等待 後台成功的返回資料

這樣，before裡面插入的圖片就相當於是一個loading，當資料成功返回後，把before裡面的圖片移除，寫在complete: function ()語句中。

我背景處理流程大概是這樣的：首先一個http GET請求，擷取公眾平台的access_token，然後再用http POST請求，擷取換取二維碼的ticket

然後再用WebClient方法，把請求到的二維碼下載到本機存放區，然後就是資料庫的增刪查改，展示二維碼到網頁上。

這麼一大段才讓loading有足夠的時間展示出來，如果時間比較短，可以網上查查看有沒有定義一個時間，讓loading能夠完整的顯示，免得很突兀。