sessionStorageを使って、初回のみローディングアニメーションを表示させる

Astroの場合、読み込み速度が非常に早くローディングアニメーションがいらない、、とも言えますが、せっかく作ったので読み込ませてみることにしました。

ロゴがフェードインするアニメーションはKeyframesで設定。
アニメーションと背景の切り替えJavaScritpでインラインに書き込みました。

で、肝心の「初回のみ」ローディングアニメーションを表示する方法ですが、sessionStrageを使って読み込み時にtrue/falseを判別し、処理を出し分けるように作ってみました。

<script is:inline>
const keyName = 'visited';
const keyValue = true;
const loader = document.getElementById('loading');

if (!sessionStorage.getItem(keyName)) {
	sessionStorage.setItem(keyName, keyValue);

	//ここに初回アクセス時の処理
	console.log('初回の閲覧');
	window.onload = function () {
		//2秒後にopacityを0にする
		setTimeout(() => {
			loader.classList.add('loaded');
		}, 2000);
		// アニメーションが終わると、要素を取り除く
		loader.addEventListener('transitionend', () => {
			loader.remove();
		});
	};
} else {
	//ここに通常アクセス時の処理
	console.log('2回目以降の閲覧');
	loader.remove();
}
</script>

で、CSSで

	#loading.loaded {
		opacity: 0;
		visibility: hidden;
	}

としているので、JavaScriptで、classがついたロゴが消えた後に画面が切り替わる仕組みです。

キャッシュクリアしてもセッションはクリアできないので、表示の確認のために、console.log('初回の閲覧');と書くとわかりやすいです、（あとで削除しますが）。
で、ディベロッパーツールの「アプリケーション」→「ストレージ」→「セッションストレージ」を見ると、設定した値、visitedというキーがtrueと判別されているというのが確認できます。これを右クリックして削除して再読み込みすると、初回セッションとなります。何度か動作を確認したい場合に便利です。

実は、なぜか一瞬アニメーションが表示されてしまうなーとうんうんうなっていたのですが、簡単なミスでした。
window.onload = をsessionStrageの外側においてしまっていたため、先に読み込みが走ってしまっていたから。

順番を変更したら、ちゃんと分岐がうまくいきました。よかったよかった。