【jQuery】ローディングを初回のみ表示 (ページ遷移や2回目以降は表示しない)

今回はサイトを最初に訪れた時のみ、ローディングを表示する方法をjQueryで作成する方法を共有しようと思います。

動きが確認できるデモサイトは下記になります。

ローディングデモページ

■アクセス1回目にのみローディングを表示

Contents

ローディングを初回のみ表示 (ページ遷移や2回目以降は表示しない)
- jQueryを追加（全ページ共通の場所）
- ローディング用CSS / HTMLの追加（デザインによって変更してください）
WebStorageAPI
初回のみローディングをつける例

ローディングを初回のみ表示 (ページ遷移や2回目以降は表示しない)

jQueryを追加（全ページ共通の場所）

<div class="loading"></div>用のHTML/CSSがあります。

下記は、クラス「.loading」にクラス「.active」を追加すると、loadingが非表示になるということを前提として作成しています。

$(function () {
  var webStorage = function () {
    if (sessionStorage.getItem('access')) {
      /*
        2回目以降アクセス時の処理
      */
      $(".loading").addClass('is-active');
    } else {
      /*
        初回アクセス時の処理
      */
      sessionStorage.setItem('access', 'true'); // sessionStorageにデータを保存
      $(".loading-animation").addClass('is-active'); // loadingアニメーションを表示
      setTimeout(function () {
        // ローディングを数秒後に非表示にする
        $(".loading").addClass('is-active');
        $(".loading-animation").removeClass('is-active');
      }, 3000); // ローディングを表示する時間
    }
  }
  webStorage();
});

※jQueryのバージョンは jquery-3.3.1で確認しました

ローディング用CSS / HTMLの追加（デザインによって変更してください）

CSS

.loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}

.loading.is-active {
  opacity: 0;
  visibility: hidden;
}

.loading-animation {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #20a3ea;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}

.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}

HTML

<div class="loading">
  <div class="loading-animation"> <img src="https://web-creates.com/wp/wp-content/uploads/2021/06/logo.png" alt="ロゴ"> </div>
</div>

WebStorageAPI

WebStorageAPI とは

今回はjQueryのWebStorageAPIを使いました。

ブラウザにデータを保存しておくことができる仕組みです。

Web Storageには2種類方法が用意されています。

sessionStorage

ページのセッション中の間、データを保存します。

データ保存期間：ブラウザを閉じるまで

localStorage

有効期限なしでデータを保存します。ブラウザを閉じたり再び開いたりしてもデータは持続します。

データ保存期間：永久

今回はローディングという特性上、データを保存する期間が「ブラウザを閉じるまで」の「sessionStorage」で記述をしてみました。

もし保存期間を永久に設定したい場合は、「localStorage」を使用してください。

sessionStorageの使い方

データをセットする方法 (keyとvalueを使用)

sessionStorage.setItem('key', 'value');

※keyとvalueは任意の値に変更してください

データを取得する方法 (keyを指定)

sessionStorage.getItem('key');

※key取得したい任意の値に変更してください

初回アクセスの判定

jQuery(function () {
  var webStorage = function () {
    if (sessionStorage.getItem('access')) {
      //2回目以降アクセス時の処理
      console.log('2回目以降のアクセスです');
      
    } else {
      //初回アクセス時の処理
      sessionStorage.setItem('access', 0);
      console.log('初回アクセスです');
    }
  }
  webStorage();
});

初回のみローディングをつける例

こちら、どんな時に使うの？と思われた方もいらっしゃるかもしれないので、一応例を書いてみようと思います。

例えば、サイトを訪れた方に向けて1回だけオープニングアニメーションをいれるなどをこちらのコードにより実装できると思います。

毎回ページ遷移をするごとにアニメーションが入るのは、結構鬱陶しいと思うので、そちらの対策ですね。

最初にアニメーションやロゴ、会社の理念などをいれることにより、より伝えたいことをシンプルにまずは伝え、サイトの内容でより詳細に会社のことを知っていただくということが可能になります。

また、オープニングアニメーションの他にも、最初にサイトを訪れた時場合にのみ、ポップアップを表示し、お客様にお知らせやバナーなどを表示することも可能です。

jQuery