在我們用ajax向后台發送數據或者請求數據時,要等待一段時間,有時有個轉菊花的話,用戶體驗會好點。
代碼如下:
1. js先給頁面加個隱藏的菊花頁面,樣式圖標自己改,我是在做webApp用框架里的圖標的。
$(docment).ready(function(){
$('body').append("<div style='display:none;width:100%; margin:0 auto;position:fixed;left:0;top:0;bottom: 0;z-index: 111;opacity: 0.5;' id='loading'>
<a class='mui-active' style='left: 50%;position: absolute;top:50%'><span class='mui-spinner'></span><p style='margin-left: -10px;'>發送中...</p></a></div>")
})
2.全局配置,在Ajax請求開始時顯示菊花頁面,結束時隱藏頁面。
$(document).ajaxStart(function(){
$("#loading").show();
})
$(document).ajaxComplete(function(){
$("#loading").hide();
})