ローディング画面を実装しよう！

こんにちは、なかにしです。

今回は意外とやったことがなかったローディング画面を実装していこうと思います。

準備
余談： loadとready
実装
おまけ：いろんなの作って遊ぶ
さいごに

準備

HTML + JavaScript で実装していきます。
バニラJSを書くのは面倒なので、古の技術「Jquery」を使用します。

適当な場所にHTMLと JSファイルを用意、Jqueryを読み込みます。

想定として、HTMLを2つ用意し、aタグで画面遷移。
画面遷移中にローディング画面を表示するという感じです。

まずHTMLを用意します。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Indexだよ</title>
  </head>

  <body>
    <p>こんにちは！次のページへ進みましょう！</p>
    <a href="./nextpage.html">次のページへ</a>
  </body>

</html>

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NextPageだよ</title>
    <script src="https://code.jquery.com/jquery-3.6.1.js"
      integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <script src="./nextpage.js"></script>
  </head>

  <body>
    <p class="aaa">aaa</p>

  </body>

</html>

$(function () {
  $(".aaa").on("click", function () {
    alert("Yaho~");
  });
});

JqueryはCDNを使用しています。
こちらからコピーできます。

Jqueryが読み込めているかの確認で、とりあえず「nextpage.html」の「aaa」というp要素をクリックしたらアラートが出るようにしました。

▽アラート出てますね。OKです。

動作確認が出来たところで、ローディング画面を実装していきます！

余談： loadとready

余談ですが、クリック時みたいに、「on(‘load’, function())」って書いていけばいいかな～と思っていたのですが、そういえば読み込み中って「ready」じゃなかったっけ？と思い出し、調べました。

今まで知らなかったのですが、Jqueryのスタートの「$(function())」って「$(window).ready」と同じなんですね…マジか…

てか「ready」「load」の違いも知らないわ。
ってことでさらに調べ。

▽こちらで紹介されている以下画像がめっちゃ分かりやすかったので共有します。

え、onClickとかナシで普通に書いたらready扱いとなり、画像が読み込む前に表示されんの？マ？

ってことで確認しました。

▽適当に画像を配置して…

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NextPageだよ</title>
    <script src="https://code.jquery.com/jquery-3.6.1.js"
      integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <script src="./nextpage.js"></script>
  </head>

  <body>
    <p class="aaa">aaa</p>
    <img src="./アルパカ.jpg">

  </body>

</html>

▽ready時(画像読み込み前)にアラート出してみます。

$(function () {
  // ↓ここはready扱いなので、画像読み込む前に表示されるらしい
  alert("画像表示前？");

  $(".aaa").on("click", function () {
    alert("Yaho~");
  });
});

▽確認。
マジで画像表示前、Readyの挙動してるわ…

まあローディングにおいてはよほど難しい処理を組み込まない限りは画像の読み込み前後どっちに実装してもあまり変わらないので、今回はon(‘load’)使っていきますね。

実装

Jqueryのon(‘load’)を使用し、ローディング中の処理を書いていきます。

何通りかやり方はあるのですが、スタンダードなのは

①ローディング中に表示したいCSSを作る
②ロード中にCSSを表示
③ロード後に非表示

というやり方です。

▽CSSを書き、HTMLに読み込ませます。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NextPageだよ</title>

    <link rel="stylesheet" href="./nextpage.css">
    <script src="https://code.jquery.com/jquery-3.6.1.js"
      integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <script src="./nextpage.js"></script>
  </head>

  <body>
    <div class="loading">
      <p>ローディング中</p>
    </div>

    <p>こんにちは。</p>
  </body>

</html>

.loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #e0cccc;
  display: flex;
  align-items: center;
  justify-content: center;
　top: 0;
  left: 0;
}

「loading」というクラス名のdivを作り、全体を覆います。
「position: fixed」で固定するのを忘れずに。
「display: flex 」「align-items: center」「justify-content: center」の最強コンボで中身を上下中央に配置します。

「top」「left」を0にしているのは、
何か要素を配置したときにその分ずれてしまうのを抑えるためです。▽

これでHTMLに配置した「こんにちは」の文字がloadingクラスのついているdivで覆われている状況になったかと思います。

これをローディング中のみ表示し、終わったら非表示にすればOKです。

▽Jqueryに「ロードが終わったら非表示にして」と書きます。

$(window).on("load", function () {
  $(".loading").hide();
});

あれ？「$(function())」は？ってなると思いますが、
Jquery3以降は$(function())の中にon(‘load’)は書けません。

前述の通り、$(function())はreadyと同義なので、
ready中にloadという意味わかんない処理になってしまい、動きません。

共存させたい場合は分けて書きましょう。
※Jquery2以前のバージョンでは上記の書き方で動きます。
同期処理だったので問題なく動いたらしいです。良くはないですが。

これで一応ローディングは完成したのですが、
ローディング終了と同時に消えるので、
表示されているか分からないレベルで一瞬で消滅します。

せっかく作ったのでちゃんと見せつけましょう。
ということで、ローディング終了から○秒かけて消える、という内容に修正します。▽

$(window).on("load", function () {
   $(".loading").fadeOut(2000);
});

「fadeOutメソッド」は文字通り、フェードアウトしてくれます。
ミリ秒指定なので、今回は2000＝2秒にしました。

▽おしゃれ～！

はい！完成です！！

おまけ：いろんなの作って遊ぶ

せっかくなので色々なローディング画面を作って遊びます。
気に入ったのは今後のアプリ開発にも組み込んじゃお～

▽おなじみのクルクル

▽なかなか

さいごに

JqueryのfadeOut有能すぎる…！
古い技術って言われてますが、やっぱ手軽さを考えるとJqueryに頼っちゃいます。

最近バニラJS書く機会減ったな～
ちゃんと定期的に書こーっと。

今回はここまで！
Enjoy Hacking!!