【JavaScript】初アクセス時だけローディング画面を表示(Web Strage API)

2022/1/7 2023/2/1 JavaScript, PROGRAMMING

おはようございます。

朝活中の@ジョウです。
元調剤薬局の薬剤師で、今は福井県福井市でフリーランスのホームページ制作しています。

先日、Web制作会社からいただいた案件で、初アクセスの時だけローディング画像を表示する方法を学べたので、まとめておきます。

この記事の内容

【コピペOK】完成コード
Web Storage APIという仕組みを利用
全体の流れ
データのセット
セットされたデータがあるかどうか
まとめ

【コピペOK】完成コード

コードは以下の通り。

お時間ない人は、コピペしてお帰りください。

<script>
	
// ページの読み込みが完了したらローディング画面を非表示
//データセット
$(window).on('load', function () {
	if (!sessionStorage.getItem('access')) {
		$('.loading').delay(1000).fadeOut();
		sessionStorage.setItem('access', 0);
	}
});

//ページの読み込みが完了してなくても3秒後にローディング画面を非表示
//データセット
setTimeout(function () {
	$('.loading').fadeOut();
	sessionStorage.setItem('access', 0);
}, 3000);

//2回目以降のアクセスならローディング画面非表示
$(function () {
  if (sessionStorage.getItem('access')) {
   $('.loading').hide();
  }
});
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<script>

// ページの読み込みが完了したらローディング画面を非表示

//データセット

$(window).on('load', function () {

if (!sessionStorage.getItem('access')) {

$('.loading').delay(1000).fadeOut();

sessionStorage.setItem('access', 0);

}

});

//ページの読み込みが完了してなくても3秒後にローディング画面を非表示

//データセット

setTimeout(function () {

$('.loading').fadeOut();

sessionStorage.setItem('access', 0);

}, 3000);

//2回目以降のアクセスならローディング画面非表示

$(function () {

if (sessionStorage.getItem('access')) {

$('.loading').hide();

}

});

</script>

お時間ある方は、少し解説するのでお付き合いください。

Web Storage APIという仕組みを利用

今回のコードの要点は、『sessionStorage』です。

これは、Web Storage APIという仕組みを使っています。

Web Storageを訳すと、『ウェブの貯蔵庫』。HTML5で登場した仕組みで、ホームページで扱う情報が保存されています。

APIは、アプリとプログラムをつなげるもの。

つまり、Web Storage APIは、ホームページの情報とプログラムをつないでくれているものという解釈でいいかなと思います。

(詳しくは、「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典を参考にしてください。わかりやすくて勉強になります(WebStorage・API))。

全体の流れ

①初めてのアクセスの時、データをセット(sessionStorage.setItem)。ローディング画像を表示。

②2回目以降のアクセスの時、セットされたデータがあるかどうかを判別し(sessionStorage.getItem)、ローディング画面を表示させない

ちなみに、セットした保存された情報のうち、ブラウザを閉じると消される情報をsessionStrage、ブラウザを閉じても消されない情報をlocalStrageと呼びます。

今回は、ブラウザを閉じるとアクセス情報が消されるので、sessionStrageを使用します。

データのセット

データをセットするために

『sessionStorage.setItem(‘key’, 値)』

と記載します。

keyと値は、任意の値です。今回は、sessionStorage.setItem(‘access’, 0)としました。

セットされたデータがあるかどうか

先ほどaccessというキーに0という値がセットされているかどうかは、

『if (!sessionStorage.getItem(‘access’)) {}』

と入力します。

初めてのアクセスなら、このif内を通り、2回目以降ならif内は飛ばされます。

まとめ

以上です。

今回紹介したコードは、ページ読み込み完了していない段階で3秒後にローディング画面を消す処理をしているので、そこでもsessionStorage.setItemを使ってデータセットする必要があります。

もしわからないことがあれば、TwitterからDMください。