php 20180320ロード中にロゴ表示しておくやつ

Posted 2021-05-04

//コピーしたまま
$(function() {
		var h = $(window).height();

		$('#wrap').css('display','none');
		$('#loader-bg ,#loader').height(h).css('display','block');
	});

	$(window).load(function () { //全ての読み込みが完了したら実行
		$('#loader-bg').delay(900).fadeOut(800);
		$('#loader').delay(600).fadeOut(300);
		$('#wrap').css('display', 'block');
	});

		//10秒たったら強制的にロード画面を非表示
	$(function(){
		setTimeout('stopload()',10000);
	});

	function stopload(){
		$('#wrap').css('display','block');
		$('#loader-bg').delay(900).fadeOut(800);
		$('#loader').delay(600).fadeOut(300);
	}

#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #fff;
	z-index: 9998;
}
#loader {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-left: -100px;
	text-align: center;
	color: #fff;
	z-index: 9999;
	.logo {
		margin-bottom: 15px;
		img {
			@include mq(sp) {
				width: 120px;
				height: 120px;
			}
		}
	}
}

//http://gimmicklog.main.jp/jquery/278/
//ケーオーホテルTOPに実装

//全ページに適応するのでheader.phpに記載
<div id="loader-bg">
	<div id="loader">
		<div class="logo">
			<img src="images/common/logo_2.png" alt="KEIO HOTEL" />
		</div>
		<div class="load">
			<img src="images/common/loading01_r1_c1.gif" alt="Loading now">
		</div>
	</div>
</div>