Ajax載入菊花loding效果_AJAX相關

來源:互聯網
上載者:User

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表徵圖消失

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.