【ローディング】画像やhtmlがすべて読み完了してからjQueryでローディングをフェードアウトさせる方法

読み込みに時間がかかるサイトだったり読み込み時のページを見せたくない場合にローディングのアニメーションを使う場合があると思います。

今回はページが読み込まれている間はローディングを表示させて画像やhtmlがすべて読み込みが完了したらローディングを終了させる方法を紹介していきたいと思います。

読み込みに時間がかかるページだと離脱にもなりますがローディングをさせることでページを今読み込み中ということが分かるのでユーザーも待ってくれる場合があります。

ローディングを作る

html

<div class="loading">
	<div class="load_inner">
		<div class="load">
		<div></div>
		<div></div>
		</div>
	</div>
</div>

css

.load_inner{
	position:fixed;
	top: 50%;
	left: 50%;
	width:40px;
	height:40px;
	margin-left: -20px;
	margin-top: -20px;
}

.loading{
	position: fixed;
	width: 100%;
	height: 100%;
	background: #fff;
}

.load{
	position:relative;
	width:40px;
	height:40px;
	border-radius:50%;
	background:#eee;
}
.load:after{
	position:absolute;
	top:4px;
	left:4px;
	width:32px;
	height:32px;
	border-radius:50%;
	background:#fff;
	z-index:1;
	content:"";
}
.load div{
	width:40px;
	height:20px;
	border-radius:20px 20px 0 0;
}
.load div:first-child{
	background:#000;
	transform-origin:20px 20px;
	transform:rotate(0deg);
	animation:load1 0.5s linear 0s infinite normal;
}

@keyframes load1{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}

@-webkit-keyframes load1{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}

js

jQueryは書き方によって実行結果が変わっていきます。

今回は画像とhtmlがすべて読み込み終わったらローディングを解除したいので下記のように書きます。

jQuery(window).on('load',function(){
   /*画像、htmlなどの読み込みがすべて完了したら処理*/
});

ローディングを非表示にする

下記のように書くことによって画像、htmlなどの読み込みがすべて完了したらローディングをフェードアウトさせることができます。

今回は画像、htmlがすべて読み込みが完了してすぐではなくsetTimeを使って少し時間差をもたせています。

jQuery(window).on('load',function(){
        setTimeout(function(){
		jQuery('.loading').fadeOut();
        }, 1000);
});

サンプル