jQuery Web制作 コーディング

【jQuery】コピペでOK!ページ読み込み中に表示するローディングの作り方

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

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

事前準備(jQuery本体を読み込む)

まずは事前準備として、jQueryを使用するのでjQuery本体を読み込む必要があります。

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

【初めて使う人向け】jQuery本体を読み込む方法

 

HTML

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

<div id="loader-bg">
  <div id="loader">
    <img src="img/load.gif" />
  </div>
</div>

今回はローディングのアニメーション( imgタグを囲ったdiv )が最初にフェードアウトして、少し遅れて背景色( id="loader-bg" )がフェードアウトするようにします。

gifについては無料で使えるサイトがたくさんあるので「ローディング gif フリー」などで検索してみて下さい。

またこのHTMLを書く場所はわりとどこでも大丈夫ですが、当然コンテンツの中にあったら分かりにくいので、headerの直前あたりがいいかと思います。

 

CSS

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

#loader-bg {
  background-color: #fff;
  height: 100%;
  left: 0px;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 100;
}
#loader-bg img {
  left: 50%;
  position: fixed;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 100;
}

まず今回の背景色は白にして、画面全体を覆うように幅と高さを100%にします。

またpositionはfixedで固定しておかないと画面を覆ってくれないのでご注意下さい。

 

そしてgifですが、縦横中央に来るようにしました。

縦横中央にする方法については以下の記事を参照下さい。

画像の上にテキストを上下左右中央に表示させる方法

 

jQuery

そしてjQueryを書いていきます。

$(function () {
  const h = $(window).height();
  $("#loader-bg ,#loader").height(h).css("display", "block"); //ローディング画像を表示
});
$(window).on("load", function () {
  // 読み込み完了したら実行する
  $("#loader").delay(600).fadeOut(300); // ローディングをフェードアウト
  $("#loader-bg").delay(900).fadeOut(800); // 背景色をフェードアウト
});

ここでは最後の数値を変えることでアニメーションと背景色の消えるタイミングや速度を調整することが出来ます。

もしローディング(#loader)と背景色の(#loader-bg)の数値を同じにすれば同じタイミングと速度でフェードアウトしますが、ここではローディングが先にフェードアウトしてから背景色がフェードアウトするようにしています。

ぜひご自身の環境で確かめながら調整してみて下さい。

以上です。

-jQuery, Web制作, コーディング