ajax載入菊花loading效果

最後更新：2017-08-31 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：query tag tle body efault com document url 成功

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

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

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

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

　　設定之後，就是我們需要配置的樣式：

一、顯示菊花loading　

　　<!DOCTYPE html>
　　　　<html>
　　　　　　<head>
　　　　　　　　<meta charset="UTF-8">
　　　　　　　　<title></title>
　　　　　　　　<script src="spin.min.js"></script>
　　　　　　</head>
　　　　　　<body>
　　　　　　　　<div id="loading"></div>
　　　　　　　　<script>
　　　　　　　　　　var opts = {
　　　　　　　　　　　　lines: 13 // The number of lines to draw
　　　　　　　　　　　　, length: 28 // The length of each line
　　　　　　　　　　　　, width: 14 // The line thickness
　　　　　　　　　　　　, radius: 42 // The radius of the inner circle
　　　　　　　　　　　　, scale: 1 // Scales overall size of the spinner
　　　　　　　　　　　　, corners: 1 // Corner roundness (0..1)
　　　　　　　　　　　　, color: ‘#000‘ // #rgb or #rrggbb or array of colors
　　　　　　　　　　　　, opacity: 0.25 // Opacity of the lines
　　　　　　　　　　　　, rotate: 0 // The rotation offset
　　　　　　　　　　　　, direction: 1 // 1: clockwise, -1: counterclockwise
　　　　　　　　　　　　, speed: 1 // Rounds per second
　　　　　　　　　　　　, trail: 60 // Afterglow percentage
　　　　　　　　　　　　, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
　　　　　　　　　　　　, zIndex: 2e9 // The z-index (defaults to 2000000000)
　　　　　　　　　　　　, className: ‘spinner‘ // The CSS class to assign to the spinner
　　　　　　　　　　　　, top: ‘50%‘ // Top position relative to parent
　　　　　　　　　　　　, left: ‘50%‘ // Left position relative to parent
　　　　　　　　　　　　, shadow: false // Whether to render a shadow
　　　　　　　　　　　　, hwaccel: false // Whether to use hardware acceleration
　　　　　　　　　　　　, position: ‘absolute‘ // Element positioning
　　　　　　　　　　}
　　　　　　　　　　var target = document.getElementById(‘loading‘)
　　　　　　　　　　var spinner = new Spinner(opts).spin(target);
　　　　　　　　　　//隱藏spinner
　　　　　　　　　　//spinner.spin();
　　　　　　</script>
　　　　</body>
　　</html>

二、ajax載入菊花loading效果

　　//loadAjaxSpin函數的作用是ajax調用開始前出現loading表徵圖，資料載入完成後loading表徵圖消失　　

　　<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　　<meta charset="UTF-8">
　　　　　　<title></title>
　　　　　　<script src="spin.min.js"></script>
　　　　　　<script src="jquery-1.10.2.js"></script>
　　　　</head>
　　　　<body>
　　　　　　<div class="spin"></div>
　　　　　　<input type="button" id="btnRequest" value="請求資料"/>
　　　　　　<script>
　　　　　　//第一個參數為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>
　　</body>
</html>

上述代碼的效果：點擊後顯示出菊花，等ajax載入成功之後菊花隱藏，執行回呼函數。

參考原文：http://www.cnblogs.com/woodk/p/5364995.html

ajax載入菊花loading效果

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More