標籤：
本文只提供思路，CSS神馬的自己定製吧，JS是可以最佳化的，比如，輸出圖片的JS也可以放到showdiv()裡面，我沒有做最佳化，只是實現，別笑話我，我比較懶...
基本思路：由於Html的解析是從上到下的，所以，可以在主版頁面（MVC中的LayOut）頁面最上面輸出一個遮罩層和一張等待效果的圖片，這樣子，頁面開啟的時候，就會有一個等待效果了。代碼如下：
注意：下面這些代碼一定是放到頁面的最前面的，放到後面可能就不太好了。
1 <head> 3 <style type="text/css"> 4 #loading { 5 /*margin-top:300px;*/ 6 position: absolute; 7 top: 40%; 8 left: 60%; 9 margin-left: -75px;10 text-align: center;11 line-height: 25px;12 font-size: 12px;13 font-weight: bold;14 color: #F00;15 z-index: 1002;16 }17 #bg {18 display: none;19 position: absolute;20 top: 0%;21 left: 0%;22 width: 100%;23 height: 100%;24 background-color: black;25 z-index: 1001;26 -moz-opacity: 0.6;27 opacity: .60;28 filter: alpha(opacity=60);29 }30 </style>31 <script type="text/javascript">32 function showdiv() {33 document.getElementById("bg").style.display = "block";34 }35 function hidediv() {36 document.getElementById("bg").style.display = ‘none‘;37 }38 document.write("<img src=‘/loading.gif‘ id=‘loading‘ /><div id=‘bg‘></div>");39 showdiv();40 </script>
第二步：給所有的的點擊事件加上遮罩等待效果：
1 $("a").click(function () {2 showdiv();3 $("#loading").fadeIn();4 });
第三步：載入完了隱藏遮罩層和等待圖片：
頁面載入完成隱藏
1 $(function() {2 $(‘#loading‘).fadeOut();3 hidediv();4 });
AJAX請求加上效果，請求完成隱藏
$(function () { // 設定jQuery Ajax全域的參數 $.ajaxSetup({ beforeSend: function () { showdiv(); $("#loading").fadeIn(); }, complete:function() { $(‘#loading‘).fadeOut(); hidediv(); }, }); });
AJAX我沒有經過測試放出來的，如果有錯誤，希望能及時告訴我...
在手機上，應該是去監聽它的Touch事件比較好，但是我給TouchStart事件和Touched事件不管哪個添加監聽之後，連結就不會跳轉了，如果誰有好的解決方案，希望能告訴我！先謝過了....
本人水平有限，實現方式比較低級，歡迎吐槽，共同進步...
手機站全域的html+css載入等待效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
