コード・実装

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

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

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

ローディング デモページ

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

 

ローディングを初回のみ表示 (ページ遷移や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回だけオープニングアニメーションをいれるなどをこちらのコードにより実装できると思います。

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

 

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

 

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

 

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy