正在加載中...，這個需求還是很常見的，不管是app還是h5都需要，否則網絡不順暢的情況下，使用者都不知道到底送出了沒有，會出現多次點選的情況，spin.js是一個開源的第三方進度展示js元件，官網位址：spin.js,github開源位址：GitHub - fgnass/spin.js: A spinning activity indicator，目前将近10000顆星星，可以自定義樣式，還是挺受歡迎的。在他們的官網還可以設定樣式，實時看效果，之前我從他們的官網引入js:http://spin.js.org/spin.js,發現頁面上一直無法展示正在加載中的進度條。發現無法new Spiner()對象。不知道為什麼，後面網上下載下傳了一份spin.min.js後，可以了，我把spin.min.js放百度網盤供大家下載下傳。 百度網盤 請輸入提取碼 提取碼：kbma。好，下面給出測試頁面代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>spin.js測試</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!--原版壓縮spin.js-->
<script type="text/javascript" src="./static/js/spin.min.js"></script>
<script type="text/javascript" src="./static/js/jquery2.1.1.min.js"></script>
<link href="css/index.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
<style rel="stylesheet" type="text/css">
#mask {
display: none;
height: 100%;
width: 100%;
position: fixed;
*position: absolute;
*height: 1380px;
background: black;
top: 0;
left: 0;
opacity: 0.6;
}
</style>
<script type="text/javascript">
//opts 可從網站線上制作 http://spin.js.org/
var opts = {
//innerImage: {url: '../img/logo.png', width: 56, height: 56 }, //内部圖檔
lines : 13, // 花瓣數目
length : 20, // 花瓣長度
width : 10, // 花瓣寬度
radius : 30, // 花瓣距中心半徑
corners : 1, // 花瓣圓滑度 (0-1)
rotate : 0, // 花瓣旋轉角度
direction : 1, // 花瓣旋轉方向 1: 順時針, -1: 逆時針
color : '#FFF', // 花瓣顔色5882FA
speed : 1, // 花瓣旋轉速度
trail : 60, // 花瓣旋轉時的拖影(百分比)
shadow : false, // 花瓣是否顯示陰影
hwaccel : false, //spinner 是否啟用硬體加速及高速旋轉
className : 'spinner', // spinner css 樣式名稱
zIndex : 2e9, // spinner的z軸 (預設是2000000000)
top : 'auto', // spinner 相對父容器Top定位 機關 px
left : 'auto', // spinner 相對父容器Left定位 機關 px
position : 'relative', // element position
progress : true, // show progress tracker
progressTop : 0, // offset top for progress tracker
progressLeft : 0 // offset left for progress tracker
};
var spinner = new Spinner(opts);
$(document).ready(function() {
$("#btnRequest").bind("click", function() {
ajaxRequestData();
})
})
function ajaxRequestData() {
$.ajax({
type : "POST",
timeout : 10000,
dataType : "text",
url : "你的背景接口請求位址",
beforeSend : function() {
//異步請求時spinner出現
$("#firstDiv").text("");
var target = $("#firstDiv").get(0);
spinner.spin(target);
//添加蒙闆，避免多次點選送出按鈕
$("#mask").css("display", "block");
//進度
//spinner.setProgress(i, 20);
},
success : function(msg) {
$("#firstDiv").text(msg);
//關閉spinner
spinner.spin();
//關閉蒙闆
$("#mask").css("display", "none");
},
error : function(e, jqxhr, settings, exception) {
$("#firstDiv").text("請求發生錯誤...");
//關閉spinner
spinner.spin();
//關閉蒙闆
$("#mask").css("display", "none");
}
})
}
</script>
</head>
<body>
<div></div>
<div id="firstDiv"></div>
<div id="secondDiv">
<input id="btnRequest" type="button" value="請求資料" />
</div>
<div id="mask"></div>
</body>
</html>
效果如下：
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)