Ajax載入菊花loding效果_AJAX相關

Ajax 非同步請求的時候，一般都會利用一個動態 gif小圖片來製作一個Ajax Loading ，以便增加使用者體驗。

這裡我們使用Spin.js ，該 js 指令碼壓縮後5k，可以不用任何圖片，任何外部的CSS樣式，就可以建立一個Ajax Loading 指標

Spin.js 的線上設計、示範及下載地址為：http://fgnass.github.io/spin.js/

我們可以在連結頁面中，動態設定樣式同時會自動產生樣式的配置指令碼：

Spin.js 用法極其的簡單：

顯示 spinner

var target=document.getElementById("id") spinner.spin(target);

隱藏 spinner

 spinner.spin();

我們來做一個簡單完整的例子，來體驗一次吧： 

<script type="text/javascript" src="zepto.min.js"></script><script type="text/javascript" src="spin.min.js"></script><script type="text/javascript">//第一個參數為loading表徵圖載入的標籤，第二個為ajax的資料介面，第三個為回呼函數。function loadAjaxSpin(ele, get_url, callback) {var opts = {lines: 13, // 花瓣數目 length: 20, // 花瓣長度 width: 10, // 花瓣寬度 radius: 30, // 花瓣距中心半徑 scale: 1,corners: 1, // 花瓣圓滑度 (0-1) color: '#000', // 花瓣顏色 opacity: 0.25,rotate: 0, // 花瓣旋轉角度 direction: 1, // 花瓣旋轉方向 1: 順時針, -1: 逆時針 speed: 1, // 花瓣旋轉速度 trail: 60, // 花瓣旋轉時的拖影(百分比) zIndex: 2e9, // spinner的z軸 (預設是2000000000) className: 'spinner', // spinner css 樣式名稱 top: '50%', // spinner 相對父容器Top定位 單位 px left: '50%', // spinner 相對父容器Left定位 單位 px shadow: false, // 花瓣是否顯示陰影 hwaccel: false, //spinner 是否啟用硬體加速及高速旋轉  position: 'absolute'};var spinner = new Spinner(opts);$(ele).show();var target = $(ele)[0];spinner.spin(target);$.ajax({url: get_url,dataType: 'html',success: function(data) {spinner.spin();$(ele).hide();callback(data);}})}var foo = function(data) {console.log(data);}$(function() {$('#btnRequest').on('click', function() {loadAjaxSpin('.spin', 'http://192.168.1.191/h5/font.html', foo);});});</script><div class="spin"></div><div><input id="btnRequest" type="button" value="請求資料" /></div>

上面例子中，我們寫了一個函數loadAjaxSpin，作用是ajax調用開始前 出現loading表徵圖，資料載入完成後loading表徵圖消失

效果：點擊後顯示出菊花，然後執行回呼函數。