說到頁面loading效果，現在各種PC端和移動端的應用使用loading都十分的廣泛，這是因為頁面的載入時需要時間的，如果頁面載入很快，loading的作用可能還不是特別能夠體現，但是如果當頁面載入速度不是很快甚至很慢的時候，頁面就會出現白屏的狀況，如果沒有使用loading來和使用者進行互動，使用者並不知道應用到底是出現什麼問題（卡死、出錯或者在載入）那麼就會十分的影響使用者體驗，頁面載入所需要時間越長，那麼可能損失的使用者量就會多。所以在恰當的時候使用loading是解決網頁載入緩慢時與使用者互動的最好解決方案。下面就說一說筆者本人如何實現頁面loading效果的。如有大家更好的解決方案，也可以分享出來。

簡單loading效果的實現

1. <div id="loading">  
2.   <img src="photos/loading/2.gif" class="img-responsive">  
3. </div><pre name="code" class="css">  

1. #loading  
2. {  
3.     position:fixed;  
4.     top:40%;  
5.     left:45%;  
6.     z-index:999;  
7. }  

1. $(window).load(function(){  
2.     //適當延遲隱藏，提高loading效果  
3.     //$('#loading_all').delay(1000).hide(0);  
4.     $('#loading_bottom').hide(0);  
5. });  

1. var str = "";     
2. str+="<divid=\"loading\">";  
3. str+="   <imgsrc=\"${ctx}photos/loading/2.gif\" class=\"img-responsive\">";  
4. str+="</div>";  
5. var htmldata = str;  
6. $ ('body *:first').before(htmldata);  

1. $(window).load(function(){  
2.     //為ajax繫結loading_bottom  
3.     $(document).ajaxStart(function(){  
4.         $("#loading").show();//在ajax請求開始的時候啟用loading  
5.     }).ajaxStop(function(){  
6.         $('#loading').hide(0);//在ajax請求結束後隱藏loading  
7.     });  
8. });  

仿部分原生APPloading效果的實現

大家可以看到部分原生APP的loading效果是在載入的時候好像先進入一個loading頁面，在目標頁面載入完成後，才跳轉到另一個頁面，在載入過程中你是看不到需要載入的頁面情況的。那麼這個效果應該如何實現？

首先想到的就是在頁面頂部加入一個loading層，這個層的高度和寬度和頁面的高度和寬度應該一樣，並且遮蓋著這個頁面，在這個層的中間加入loading圖或者CSS3寫的loading效果，簡單的思路成型了。

1. <divid="loading_all">
2.          <div>
3.              <imgsrc="photos/loading/1.gif"class="img-responsive">
4.          </div>
5. </div>

1. #loading_all  
2. {        width:100%;  
3.         height:100%;  
4.         position:fixed;  
5.         z-index:999;  
6.         background-color:white;  
7. }  

1. #loading_all div  
2. {  
3.       position:absolute;  
4.     width:60px;  
5.     height:60px;  
6.     top:50%;  
7.     margin-top:-60px;  
8.     left:50%;  
9.     margin-left:-30px;  
10. }  

1. /*滾動條禁用*/  
2. .scoll_dis  
3. {  
4.     overflow:scroll;  
5.     overflow-y:hidden;  
6. }  

頁面載入完成後恢復滾動條。

1. $(window).load(function(){  
2.     $('#loading_all').delay(300).hide(0);  
3.     setTimeout(function(){  
4.         $('body').removeClass("scoll_dis");  
5.     },300);  
6. });  

1. //阻止觸控事件  
2. document.addEventListener("touchmove", myFunction);  
3. function myFunction(e) {  
4.     e.preventDefault();   
5. }  

1. //解除觸控鎖定  
2. document.removeEventListener("touchmove", myFunction);