So zeigen Sie die Seite an, nachdem der Fortschrittsbalken geladen wurde-CSS-Tutorial-php.cn

So zeigen Sie die Seite an, nachdem der Fortschrittsbalken geladen wurde

一个新手

Freigeben： 2017-09-09 13:01:40

Original

2496 Leute haben es durchsucht

1. Idee: Fügen Sie viele Bilder hinzu, um die Ladezeit zu verzögern und die Bilder nach dem Laden anzuzeigen. Definieren Sie eine äußere Ebene p, um das Bild abzudecken, fügen Sie das beim Laden angezeigte Bild in die innere Ebene p ein, zentrieren Sie die innere Ebene p auf der Seite, verwenden Sie den setInterval-Timer, um die äußere Ebene p nach 3 Sekunden festzulegen, und blenden Sie dann die äußere Ebene aus Ebene p, um das Bild nach dem Laden anzuzeigen.

<!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=&#39;<p class="loading"><p class="pic"></p></p>&#39;;
		$(&#39;body&#39;).append(loading);
		setInterval(function(){
			$(&#39;.loading&#39;).fadeOut();
		},3000)
	})
</script>
</body>
</html>

Nach dem Login kopieren

Wissenspunkte:

p Zentrierung:

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

Nach dem Login kopieren

Idee: Verwenden Sie die Methode zur Überwachung von Zustandsereignissen: onreadystatechange, beurteilen Sie redayState und erzielen Sie den Effekt, dass die Seite nach dem Laden angezeigt wird

<!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==&#39;complete&#39;){
			$(&#39;loading&#39;).fadeOut();
		}
	}
</script>
</body>
</html>

Nach dem Login kopieren

Wissenspunkte:

Überwachen Sie den Status von readyState über das Ereignis onreadystatechange. Wir müssen uns nur um den letzten Status „abgeschlossen“ kümmern. Wenn der vollständige Status erreicht ist, bedeutet dies, dass der Ladevorgang erfolgreich ist.

Idee: Verwenden Sie CSS3, um Animationseffekte zu erzielen und die Seite nach dem Laden anzuzeigen. Es wird die gleiche Methode zur Überwachung des onreadystatechange-Ereignisses verwendet, der Unterschied besteht jedoch darin, dass ein dynamischer Effekt erzielt wird.

Verwenden Sie das i-Tag und fügen Sie CSS-Stile hinzu, um 5 beabstandete Rechtecke zu erhalten. Verwenden Sie die Animation, um alle 1,2 Sekunden eine Endlosschleife zu erstellen. Jedes i-Tag wird mit einer Verzögerung von 0,1 s in Y-Richtung gedehnt und verkürzt, um einen Animationseffekt zu erzielen.

<!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==&#39;complete&#39;){
			$(&#39;loading&#39;).fadeOut();
		}
	}
</script>
</body>
</html>

Nach dem Login kopieren

Wissenspunkte:

1.Skala: Dehnung und Verkürzung. ScaleX:x-Richtung. scaleY: y-Richtung.

2.infinite: Endlosschleife

3.animate-delay:0.1s Verzögerung 0.1s

4.@keyframes Animationsname{

0 %{

}

100 %{

}

Das obige ist der detaillierte Inhalt vonSo zeigen Sie die Seite an, nachdem der Fortschrittsbalken geladen wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!