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

簡單loading效果的實現

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

#loading
{
	position:fixed;
	top:40%;
	left:45%;
	z-index:999;
}

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

var str = "";	
str+="<div id=\"loading\">";
str+="   <img src=\"${ctx}photos/loading/2.gif\" class=\"img-responsive\">";
str+="</div>";
var htmldata = str;
$ ('body *:first').before(htmldata);

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

仿部分原生APPloading效果的實現

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

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

<div id="loading_all">
         <div>
             <img src="photos/loading/1.gif" class="img-responsive">
         </div>
</div>

#loading_all
{        width:100%;
        height:100%;
        position:fixed;
        z-index:999;
        background-color:white;
}

#loading_all div
{
      position:absolute;
    width:60px;
    height:60px;
    top:50%;
    margin-top:-60px;
    left:50%;
    margin-left:-30px;
}

/*滾動條禁用*/
.scoll_dis
{
	overflow:scroll;
	overflow-y:hidden;
}

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

$(window).load(function(){
	$('#loading_all').delay(300).hide(0);
	setTimeout(function(){
		$('body').removeClass("scoll_dis");
	},300);
});

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

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