cookieを判定して条件分岐

リッチなサイト制作をする時度々必要になってくるスプラッシュ画面。
主な用途はサイトコンテンツを表示する前に表示されるローディング画面ですね。

他にもサイトのイメージ訴求に使ったりすることもあるのですが、毎回スプラッシュ画面が表示されるのは鬱陶しいということ、でクッキーを使って初回訪問時にだけ表示されるようにしたいとご要望をいただいた時のメモ。

PHPの時の参考：PHPでcookieを使ってみる

まずHTMLでスプラッシュ画面の要素を作る。

<div id="loader">
</div>


<div class="wrapper">
	ページコンテンツ
</div>

ページコンテンツは隠しておき、JSで表示非表示を切り替える。

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}
.wrapper {
  display: none;
}

最後にJSで条件分岐。

var result = document.cookie.indexOf('wei');
if(result !== -1) {
	$("#loader").hide;
	$(".wrapper").fadeIn(800);
}
else {
$(window).on('load orientationchange', function() {
	$("#loader").delay(2000).fadeOut(800, function(){ $(this).remove(); });
	$(".wrapper").delay(2000).fadeIn(800);
});
	document.cookie = 'name="wei"; max-age=3600';
}

問題として

• javascriptが無効にされている時にページコンテンツがいつまでも表示されない。
• javascriptが実行されるタイミング次第で$(“#loader”).hide;が効くまで一瞬表示されてしまう場合がある。

等が考えられるので、CSSの部分もJSで制御する等したほうがいいかも。
では、よいJSライフを。