网页加载进度条

时间 2019-11-10

标签网页加载进度栏目 HTML 繁體版

原文原文链接

加载状态时间制做进度条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