常用的網頁載入進度條

方法1（gif圖片，設定定時器）

html中：

 <div class="loading">
    		<img class="pic">
    </div>

css中：

.loading .pic{
			position:inherit;
			background:url(src/loading.gif) no-repeat ; 
			width: 160px;
			height: 20px;
			/*top: 50%;
			left: 50%;
			margin-top: -10px;
			margin-left: -150px;*/
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index:10;
}
 

js中：

$(function(){
			setInterval(function(){
				$('.loading').fadeOut();
			},3000)
		})

或者都在js中：

$(function(){
			var loading = '<div class="loading"><img class="pic"></div>';
			$('body').append(loading);
			setInterval(function(){
				$('.loading').fadeOut();
			},3000)
		})

方法2.通過document.onreadystatechange以及document.readyState判斷網頁是否載入完成

<script >
		document.onreadystatechange = function(){
			console.log(document.readyState);
			if(document.readyState=="complete"){
				$('.loading').fadeOut();
			}
		}
	</script>

3.不使用gif，而使用css檔案