当前位置:Gxlcms > css > 如何在进度条加载后显示页面

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

时间:2021-07-01 10:21:17 帮助过:61人阅读

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居中:

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

2.

思路:利用状态事件监听的方法: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状态,说明加载成功。

3.

思路:利用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%{

}

}

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

人气教程排行