プログレスバーがロードされた後にページを表示する方法-CSSチュートリアル-php.cn

プログレスバーがロードされた後にページを表示する方法

一个新手

リリース： 2017-09-09 13:01:40

オリジナル

2496 人が閲覧しました

1. アイデア: 大量の画像を追加して読み込み時間を遅らせ、読み込み後に画像を表示します。画像を覆う外側のレイヤー p を定義し、内側のレイヤー p に読み込むときに表示される画像を導入し、内側のレイヤー p をページの中央に配置します。setInterval タイマーを使用して 3 秒後に外側のレイヤー p を設定し、外側のレイヤーを非表示にします。レイヤー 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=&#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>

ログイン後にコピー

知識ポイント:

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

ログイン後にコピー

知識ポイント:

onreadystatechange イベントを通じて、readyState のステータスを監視する必要があるのは、最後のステータス「complete」に達した場合、ロードが成功したことを意味します。

アイデア: CSS3 を使用してアニメーション効果を実現し、読み込み後にページを表示します。 onreadystatechange イベントを監視する同じ方法が使用されますが、異なる点は、動的な効果が達成されることです。

i タグを使用し、CSS スタイルを追加して、5 つの間隔の長方形を作成します。アニメーションを使用して 1.2 秒ごとにループし、無限ループします。各 i タグは、0.1 秒の遅延で 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==&#39;complete&#39;){
			$(&#39;loading&#39;).fadeOut();
		}
	}
</script>
</body>
</html>

ログイン後にコピー

知識ポイント:

1.スケール: 伸びと短縮。スケールX:x方向。スケール Y: y 方向。

2.infinite: 無限ループ

3.animate-delay:0.1s 遅延0.1s

4.@keyframes アニメーション名{

0%{

}

100%{

}

以上がプログレスバーがロードされた後にページを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。