Web制作 jQuery

【コピペOK!】jQueryを使った簡単なローディング画面の作り方

ページ読み込み中のローディング画面ってどうやって作るんだろう?

動画を使ったサイトなど、ページの読み込みに時間がかかるサイトではぜひ取り入れたいですね。

今回はjQueryと画像を使ったとても簡単なローディング画面の作り方を解説します。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


jQueryを使った簡単なローディング画面の作り方

まず初めに今回実装するローディングにはjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryを使ったことがない人はこちらの記事を参照下さい。

参考記事
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説

続きを見る

今回の完成形はこちらです。

See the Pen
ローディング
by junpei (@junpei-sugiyama)
on CodePen.

Rerunをクリックして下さい↑

順番としては以下のようになります。

  1. 色付きの背景と画像が表示
  2. 画像が先にフェードアウト
  3. 続いて背景色もフェードアウトしてコンテンツが表示

画像はロゴなどが入る場合が多いです。

また画像と背景色は同時にフェードアウトさせてもOKですが、今回はちょっと時間差を付けました。

 

コード解説

コードを見ていきますが、重要ではないコードは省略しています。

全て確認したい場合はCodePenのHTMLやCSSをクリックして下さい。

 

HTML

まずはHTMLから書いていきます。

<div class="loader-bg js-loader-bg">
  <div class="loader js-loader">
    <img src="画像パス" alt=""/>
  </div>
</div>
<div class="wrap">
  <div class="content">ページ読み込み後に表示させるコンテンツ</div>
</div>

.loader-bgがローディング全体を囲むコードですが、書く場所はbody開始タグの直後くらいがいいかと思います。

また今回は画像ですが、CSSアニメーションにしてもOKです。

今回は省略していますが.wrap内にheaderタグやmainタグが入ります。

 

CSS

次はCSSを書いていきます。

.loader-bg {
  align-items: center; /* 上下左右中央 */
  background-color: #add6ff;
  display: flex; /* 上下左右中央 */
  height: 100vh; /* 縦いっぱい */
  justify-content: center; /* 上下左右中央 */
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw; /* 横幅いっぱい */
  z-index: 9999;
}

ローディング全体のコードだけですが、ポイントは以下になります。

  • フレックスボックスで画像を上下左右中央にする
  • heightとwidthで画面いっぱいにする
  • position: fixed;でコンテンツは見えないようにする

ここで1つ注意があります。

高さ100vhはスマホのアドレスバーを含む高さなので、スマホではこのように見えます。

スマホ:height: 100vh;

スマホ:height: 100vh;

アドレスバーとは下のバーのことですね。

100vhはこのアドレスバーを含めて縦100%なので、表示部分の中心にはなりません。

これを解決するには以下のコードにする必要があります。

.loader-bg {
  height: calc( var(--vh) * 100 );
}
const spHeight = window.innerHeight;
document.documentElement.style.setProperty("--vh", spHeight / 100 + "px");

JavaScriptを書く必要があるのでちょっと難しく見えますが、コピペすればOKです。

そしてこのようになります。

スマホで縦100%

スマホで縦100%

ただし今回のデモではこの書き方はせずheight: 100vh;としています。

 

jQuery

最後にjQueryを書いていきます。

// ページの読み込み完了時にローディング画面をフェードアウト
$(window).on("load", function () {
  $(".js-loader").delay(800).fadeOut(600); // 画像をフェードアウト
  $(".js-loader-bg").delay(1300).fadeOut(600); // 背景色をフェードアウト
});
// ページの読み込みが完了しなくても5秒経ったら強制的にローディング画面をフェードアウト
setTimeout("stoploading()", 5000);
function stoploading() {
  $(".js-loader-bg").fadeOut(600);
}

3行目はページ読み込み後の0.8秒後に画像をフェードアウト、4行目は1.3秒後に背景色をフェードアウトさせています。

ページの読み込みが遅い場合はユーザーが離脱する可能性があるので、後半のコードは5秒経ってもページの読み込みが終わっていない場合は強制的にローディング画面をフェードアウトさせています。

前半は『ページ読み込み後にさせる動作』を書くので、かなり自由度が高くカスタマイズ出来るかと思います。

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, jQuery