網頁加載進度條

加載狀態時間製做進度條javascript

document.onreadystatechange    網頁加載狀態改變時的事件html

document.readyState     返回當前文檔的狀態java

返回的4種狀態jquery

1.uninitialized  還未開始載入ide

2.loading   載入中url

3.interative 已加載,文檔與用戶能夠開始交互spa

4.complete   載入完成htm

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<title></title>
		<style>
			.loading{
				white-space: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 100;
				background: #FFFFFF;
			}
			.loading .pic{
				width: 64px;
				height: 64px;
				background: url(img/89.gif);
				position:absolute;
				top: 0;
				bottom: 0;
				left: 600px;
				right: 0;
				margin: auto ;
			}
		</style>
	</head>
	<body>
		<div class="loading">
		<div class="pic">
		</div>
		</div>
	</body>
</html>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
/*當加載好了就直接關閉元素*/
	document.onreadystatechange=function(){
			if(document.readyState=="complete"){
				$(".loading").fadeOut();
		}
};
</script>

  

出處 https://www.imooc.com/video/15271blog

相關文章
相關標籤/搜索