ローディングアニメーションを外部からアクセスしたときに表示させないようにしたです。

初回アクセス時のみローディング画面を表示したいです。
現在の状況はリンク先からからトップページに戻ってくると、毎回アニメーションが発動してしまい煩わしく感じています。
javascriptは初心者どころか全く分からずでご教授いただければと思います。
よろしくお願いします
JQueryローディングアニメーションを実装したのですが、最初の一度だけ(リロード時は表示されないように)アニメーションをしたいのですがうまくいきません。
試したのはこちらです。回答よろしくお願いいたします。

js

1 <script>2 $(function () {3 var webStorage = function () {4 if (sessionStorage.getItem('access')) {5 /* 6 2回目以降アクセス時の処理 7 */8 $("page_loading").addClass('is-active');9 } else {10 /* 11 初回アクセス時の処理 12 */13 sessionStorage.setItem('access', 'true'); // sessionStorageにデータを保存14 $("load_area").addClass('is-active'); // loadingアニメーションを表示15 setTimeout(function () {16 // ローディングを数秒後に非表示にする17 $("page_loading").addClass('is-active');18 $("load_area").removeClass('is-active');19 }, 3000); // ローディングを表示する時間20 }21 }22 webStorage();23});24 25</script>

html

1<body>2 <div id="page_loading">3 <div id="load_area">4 <div class="loader">Loading...</div>5 <div id="page_loading_text"></div>6 <p class="load_p">7 <span class="load_h">8 ただいまアクセスが集中しております 9 </div>10</div>11</body>

css

1#page_loading {2 /*fixedで全面に固定*/3 position: fixed;4 z-index: 9999;5 width: 100%;6 height: 100%;7 background:#fff;8 text-align:center;9 color:#fff;10 11}12 13/* Loadingバー中央配置 */14#load_area {15 position: absolute;16 top: 50%;17 left: 50%;18 z-index: 9999;19 width: 100%;20 transform: translate(-50%, -50%);21 color: #2e2e2e;22}23#page_loading_text {24 width: 40%;25 color: #fff;26 margin: auto;27}

js

1//テキストのカウントアップ+バーの設定2var bar = new ProgressBar.Line(page_loading_text, {//id名を指定3 easing: 'easeInOut',//アニメーション効果linear、easeIn、easeOut、easeInOutが指定可能4 duration: 2500,//時間指定(1000=1秒)5 strokeWidth: 0.2,//進捗ゲージの太さ6 color: '#555',//進捗ゲージのカラー7 trailWidth: 0.2,//ゲージベースの線の太さ8 trailColor: '#bbb',//ゲージベースの線のカラー9 text: {//テキストの形状を直接指定 10 style: {//天地中央に配置11 position: 'absolute',12 left: '50%',13 top: '50%',14 padding: '0',15 margin: '-30px 0 0 0',//バーより上に配置16 transform:'translate(-50%,-50%)',17 'font-size':'1rem',18 color: '#fff',19 },20 autoStyleContainer: false //自動付与のスタイルを切る21 },22 step: function(state, bar) {23 bar.setText(Math.round(bar.value() * 100) + ' %'); //テキストの数値24 }25});26 27//アニメーションスタート28bar.animate(1.0, function () {//バーを描画する割合を指定します 1.0 なら100%まで描画します29 $("#page_loading").delay(500).fadeOut(800);//アニメーションが終わったら#page_loadingエリアをフェードアウト30});

コメントを投稿

0 コメント