こんにちは。 4年目になりました、エンジニアのユーヤです。
今回はWebサイトにアクセスしたときに再生されるローディングイベントについての記事です。
はじめに
ローディングイベントというのは、上述の通りWebサイトにアクセスしたときに発生するイベントのことです。
弊社HPであればトップページの長方形が4分割で上に消えていくような演出がありますね。
そんなローディングイベントですが、サイトによってはクリックなどユーザー側のアクションを求めるもの、アニメーションGIFや動画が再生されるものなどがあります。
これらのイベントを再読み込みのたびに毎回実行してしまうと、ユーザー心理としては「めんどくさい」と思うこと請け合いです。
そこで、「表示された」ことを内部的に保存しておけば、一度だけの実行にとどめることができます。
そんなときに使える方法はいくつかありますが、そのうちのひとつがこれから紹介するsessionStorageです。
sessionStorageとは
sessionStorageはブラウザに保存できるタブ単位の一時データ保存領域です。
特長としては以下の3点が挙げられます。
- タブを閉じると消える
- 同じタブ内では保持される
- サーバー通信に含まれない（高速）
これらの特長から、
「このタブで一度表示したか？」を覚えるのに最適
だと言えます。
実装の流れ
流れとしては、次のように考えられます。
① 初回アクセスか確認
② 初回ならローディング表示
③ 表示済みフラグを保存
④ 2回目以降はスキップ
では、実際にどういった処理になるのか見ていきましょう。
具体的な実装例
今回は、loadingというidをもつdivに.is_loadedクラスを付与する処理を考えます。
まずはHTMLです。
<div id="loading"></div>中身やほかの部分は割愛しています。
また、CSSについても処理と直接関係しないため省略します。
処理のメインであるJSは以下です。
window.addEventListener("load", () => {
const loading = document.getElementById("loading");
// ① 初回アクセスか確認
const isVisited = sessionStorage.getItem("visited");
// ② 初回ならローディング表示
if (!isVisited) {
// ③ 表示済みフラグを保存
sessionStorage.setItem("visited", "true");
loading.classList.add("is_loaded");
} else {
// ④ 2回目以降はスキップ
loading.style.display = "none";
}
});では、各処理について解説します。
① 初回アクセスか確認
sessionStorageに対してgetItem()でvisitedキーの値を確認しています。 visitedキーがない場合nullが返ります。
getItem()についてはMDNをご覧ください。
https://developer.mozilla.org/ja/docs/Web/API/Storage/getItem
② 初回ならローディング表示
シンプルなif文です。 isVisitedがnull＝visitedキーがない＝初回訪問のとき実行されます。
③ 表示済みフラグを保存
sessionStorageにvisitedキーをtrueを値としてセットします。
これにより次回以降の訪問時①の処理でtrueが返るようになります。
setItem()についてもMDNをご覧ください。
https://developer.mozilla.org/ja/docs/Web/API/Storage/setItem
④ 2回目以降はスキップ
再訪時はloading要素自体不要となるのでelseで分岐してdisplay:none;で削除しています。
まとめ
sessionStorageを用いることで、先述のようにシンプルな処理で初回訪問時の分岐を作ることができます。
もし、タブを閉じてから再度開いたときも一定期間内は実行しないようにしたい、といった場合はCookieなど別の方法を使いましょう。
ではまた。
