如何在进度条加载后显示页面-css教程-PHP中文网

如何在进度条加载后显示页面

一个新手

发布： 2017-09-09 13:01:40

原创

2731人浏览过

1.思路：加入很多图片，以延迟加载时间，实现加载完后显示图片。定义一个外层p，覆盖住图片，在内层p中引入加载时显示的图片，让内层p居中在页面上，利用setinterval定时器设置3秒后将外层p隐藏，从而显示图片，达到加载完后显示页面的效果。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.loading{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			background: #fff;
		}
		.loading .pic{
			width: 64px;
			height: 64px;
			
			background: url(loading.gif);
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
	</style>
</head>
<body>
<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
	$(function(){

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

登录后复制

知识点：

p居中：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

登录后复制

思路：利用状态事件监听的方法：onreadystatechange，判断redayState，实现加载完后显示页面的效果

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.loading{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			background: #fff;
		}
		.loading .pic{
			width: 64px;
			height: 64px;
			
			background: url(loading.gif);
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
	</style>
</head>
<body>

<p class="loading">
	<p class="pic"></p>
</p>
<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
	document.onreadystatechange=function(){
		if(document.redayState=='complete'){
			$('loading').fadeOut();
		}
	}
</script>
</body>
</html>

登录后复制

知识点：

通过onreadystatechange事件监听readyState的状态，我们只需要关心最后一个状态'complete'，当达到complete状态，说明加载成功。

思路：利用CSS3实现动画效果，达到加载完后显示页面。同样采用onreadystatechange事件监听的方法，不同的是实现了一种动态效果。

利用i标签，加入CSS样式，实现5个间隔开的矩形。利用animation每隔1.2s循环一次，无限循环。每个i标签，延时0.1s在Y方向上伸长缩短，达到动画效果。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.loading{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			background: #fff;
		}
		.loading .pic{
			width: 50px;
			height: 50px;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
		.loading .pic i{
			display: block;
			float: left;
			width: 6px;
			height: 50px;
			background: #399;
			margin: 0 2px;
			-webkit-transform: scaleY(0.4);
			    -ms-transform: scaleY(0.4);
			        transform: scaleY(0.4);
			-webkit-animation: load 1.2s infinite;
			        animation: load 1.2s infinite;
		}
		.loading .pic i:nth-child(2){
			-webkit-animation-delay: 0.1s;
			        animation-delay: 0.1s;
		}
		.loading .pic i:nth-child(3){
			-webkit-animation-delay: 0.2s;
			        animation-delay: 0.2s;
		}
		.loading .pic i:nth-child(4){
			-webkit-animation-delay: 0.3s;
			        animation-delay: 0.3s;
		}
		.loading .pic i:nth-child(5){
			-webkit-animation-delay: 0.4s;
			        animation-delay: 0.4s;
		}
		@-webkit-keyframes load{
			0%,40%,100%{
				-webkit-transform: scaleY(0.4);
				        transform: scaleY(0.4);
			}
			20%{
				-webkit-transform: scaleY(1);
				        transform: scaleY(1);
			}
		}
		@keyframes load{
			0%,40%,100%{
				-webkit-transform: scaleY(0.4);
				        transform: scaleY(0.4);
			}
			20%{
				-webkit-transform: scaleY(1);
				        transform: scaleY(1);
			}
		}
	</style>
</head>
<body>

<p class="loading">
	<p class="pic">
		<i></i>
		<i></i>
		<i></i>
		<i></i>
		<i></i>
	</p>
</p>
<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
	document.onreadystatechange=function(){
		if(document.redayState=='complete'){
			$('loading').fadeOut();
		}
	}
</script>
</body>
</html>

登录后复制

知识点：

1.scale:伸长缩短。scaleX:x方向。scaleY:y方向。

2.infinite:无限循环

3.animate-delay:0.1s 延时0.1s

4.@keyframes 动画名称{

0%{

}

100%{

}

以上就是如何在进度条加载后显示页面的详细内容，更多请关注php中文网其它相关文章！