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

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

2020-11-27 18:50:11 责编:小采

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: px;
	height: px;
	
	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=42447527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=42245386,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;

思路：利用状态事件监听的方法：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: px;
	height: px;
	
	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=42447527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=42245386,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=42447527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=42245386,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%{

}

下载本文

显示全文

全部频道