ページ読み込み時のローディング画面を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などのプラグインとは相性が悪いので注意してください。永遠にローディング画面が表示されることになってしまいます。

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら