在頁面Ajax請求或者文件上傳等待時,添加"轉菊花"圖標


在我們用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();

 })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM