同日2回目のアクセスでローディング画面非表示

ローディング
-同日2回目のアクセスでローディング画面非表示-

デモページを見る

See the Pen 4-1-7同日2回目のアクセスでローディング画面非表示 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」下のRerunを押して動きを確かめてね！↑

動きを実現する仕組み

jquery.cookie というcookie を扱うライブラリを使い、サイトにアクセスした年月日を取得して同じ日付で2 回目以降ならローディング画面を非表示にする。

＊サーバにアップをしないと動作確認はできません。

［使用するライブラリ］
＊ jQuery
＊ jquery.cookie（https://github.com/carhartl/jquery-cookie）

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/4-1-7.css">
</head>

body内のローディングを表示させたい場所に以下のHTMLを記載します。

<div id="splash">
<div id="splash_logo">
Loading...
<!--/splash_logo--></div>
<!--/splash--></div>
<div id="container">
<p>ローディング後、この画面が見えます。</p>
<!--/container--></div>

body 終了タグ直前にjQueryとjquery.cookie、動きを制御する自作のJS の3 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXv
ZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.
cookie.js"></script>
<script src="js/4-1-7.js"></script>
</body>

自作のCSS内の書き方

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	background:#333;
	text-align:center;
	color:#fff;
	display: none;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
	width:40px;
}

自作のJS内の書き方

//同じ日付で2回目以降ならローディング画面非表示の設定

var splash_text = $.cookie('accessdate'); //キーが入っていれば年月日を取得
var myD = new Date();//日付データを取得
var myYear = String(myD.getFullYear());//年
var myMonth = String(myD.getMonth() + 1);//月
var myDate = String(myD.getDate());//日
    
if (splash_text != myYear + myMonth + myDate) {//cookieデータとアクセスした日付を比較↓
        $("#splash").css("display", "block");//１回目はローディングを表示
        setTimeout(function () {
            $("#splash_logo").fadeIn(1000, function () {//1000ミリ秒（1秒）かけてロゴがフェードイン
                setTimeout(function () {
            $("#splash_logo").fadeOut(1000);//1000ミリ秒（1秒）かけてロゴがフェードアウト
                }, 1000);//1000ミリ秒（1秒）後に処理を実行
        setTimeout(function () {
            $("#splash").fadeOut(1000, function () {//1000ミリ秒（1秒）かけて画面がフェードアウト
            var myD = new Date();
            var myYear = String(myD.getFullYear());
            var myMonth = String(myD.getMonth() + 1);
            var myDate = String(myD.getDate());
            $.cookie('accessdate', myYear + myMonth + myDate); //accessdateキーで年月日を記録
        });
        }, 1700);//1700ミリ秒（1.7秒）後に処理を実行
    });
}, 1000);//1000ミリ秒（1秒）後に処理を実行
}else {
    $("#splash").css("display", "none");//同日2回目のアクセスでローディング画面非表示
}