如何在進(jìn)度條加載后顯示頁面

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:50:11

如何在進(jìn)度條加載后顯示頁面

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

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

1.思路：加入很多圖片，以延遲加載時(shí)間，實(shí)現(xiàn)加載完后顯示圖片。定義一個(gè)外層p，覆蓋住圖片，在內(nèi)層p中引入加載時(shí)顯示的圖片，讓內(nèi)層p居中在頁面上，利用setInterval定時(shí)器設(shè)置3秒后將外層p隱藏，從而顯示圖片，達(dá)到加載完后顯示頁面的效果。

<!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>

知識(shí)點(diǎn)：

p居中：

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

思路：利用狀態(tài)事件監(jiān)聽的方法：onreadystatechange，判斷redayState，實(shí)現(xiàn)加載完后顯示頁面的效果

<!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>

知識(shí)點(diǎn)：

通過onreadystatechange事件監(jiān)聽readyState的狀態(tài)，我們只需要關(guān)心最后一個(gè)狀態(tài)'complete'，當(dāng)達(dá)到complete狀態(tài)，說明加載成功。

思路：利用CSS3實(shí)現(xiàn)動(dòng)畫效果，達(dá)到加載完后顯示頁面。同樣采用onreadystatechange事件監(jiān)聽的方法，不同的是實(shí)現(xiàn)了一種動(dòng)態(tài)效果。

利用i標(biāo)簽，加入CSS樣式，實(shí)現(xiàn)5個(gè)間隔開的矩形。利用animation每隔1.2s循環(huán)一次，無限循環(huán)。每個(gè)i標(biāo)簽，延時(shí)0.1s在Y方向上伸長縮短，達(dá)到動(dòng)畫效果。

<!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>

知識(shí)點(diǎn)：

1.scale:伸長縮短。scaleX:x方向。scaleY:y方向。

2.infinite:無限循環(huán)

3.animate-delay:0.1s 延時(shí)0.1s

4.@keyframes 動(dòng)畫名稱{

0%{

}

100%{

}

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com