如何在進度條加載后顯示頁面

來源：懂視網責編：小采時間：2020-11-27 18:50:11

如何在進度條加載后顯示頁面

如何在進度條加載后顯示頁面:1.思路：加入很多圖片，以延遲加載時間，實現加載完后顯示圖片。定義一個外層p，覆蓋住圖片，在內層p中引入加載時顯示的圖片，讓內層p居中在頁面上，利用setInterval定時器設置3秒后將外層p隱藏，從而顯示圖片，達到加載完后顯示頁面的效果。<!DOC

推薦度：

點擊下載本文 文檔為doc格式

導讀如何在進度條加載后顯示頁面:1.思路：加入很多圖片，以延遲加載時間，實現加載完后顯示圖片。定義一個外層p，覆蓋住圖片，在內層p中引入加載時顯示的圖片，讓內層p居中在頁面上，利用setInterval定時器設置3秒后將外層p隱藏，從而顯示圖片，達到加載完后顯示頁面的效果。<!DOC

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;

思路：利用狀態事件監聽的方法：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%{

}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com