ページ読み込み時のローディング画面をjQueryで手軽に実装する方法

2018.02.26 2018.03.26jQuery
ページ読み込み時のローディング画面をjQueryで手軽に実装する方法

ページ読み込み時のローディング画面を手軽に実装する方法のメモ。

ローディング画面を表示されるようにしておくことで、読み込み中のガタガタをユーザーに見せないようにできるメリットがあります。

やっていることはごく簡単で、ページ読み込み中はウィンドウいっぱいにローディング画面を表示し、読み込み完了時に非表示にするという流れです。

ページ読み込み時にローディング画面を表示させるソース

■HTML

<div class="loading">
<img src="images/loading.gif" />
</div>

上記のソースをHTMLのはじめの方、できれば直下あたりに追記してください。

■CSS

.loading {
width: 100%;
height: 100%;
background: rgba(255,255,255,1.0);
position: fixed;
top: 0;
left: 0;
z-index: 20000;
}
.loading img {
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
}

CSSは下記のような感じ。背景色はお好みで変更してください。

また、ローディング時にくるくる回る画像についてはgifまたはsvgで用意しましょう。こんな感じのやつですね↓

その他、ロゴ画像を表示したり、やりようによっておしゃれにできると思うのでいろいろ工夫してみてください。

■jQuery

$(window).load(function(){
$('.loading').fadeOut();	
});

ページをすべて読み込んだタイミングでローディング画面をフェードアウトさせています。

Lazy Load とは相性が悪いので注意

ちなみにこの方法は、ページの読み込みが完了するまでローディング画面でウィンドウ全体を覆い隠し、読み込み完了時にローディング画面を非表示にするというものです。

そのため、画像の読み込みを遅延するLazy Loadなどのプラグインとは相性が悪いので注意してください。永遠にローディング画面が表示されることになってしまいます。

柴田竹思

柴田竹思

ベトナム在住Web系フリーランス。有名企業から個人事業まで、いろんなウェブサイトを制作してます。これまで400弱くらい作りました。一年中WordPressばっかりいじってます。

プロフィールはこちら