質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1229閲覧

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

ghtew2

総合スコア245

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2022/12/15 09:46

編集2022/12/15 11:18

状況

初回アクセス時のみローディング画面を表示したいです。
現在の状況はリンク先からからトップページに戻ってくると、毎回アニメーションが発動してしまい煩わしく感じています。
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>

css

1.page_loading.is-active { 2 opacity: 0; 3 visibility: hidden; 4} 5 6 7 8.load_area.is-active { 9 opacity: 1; 10 visibility: visible; 11}

ここから下はローディングアニメーションのソースコードです。

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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2022/12/16 00:34

「外部からアクセスしたときに表示させない」と「初回アクセス時のみローディング」が条件がずれていると思うのですが?
guest

回答2

0

クッキーかローカルストレージにアクセス済みの情報を保持しておけばよいでしょう

投稿2022/12/16 00:34

yambejp

総合スコア114789

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ghtew2

2022/12/20 08:20

回答ありがとうございます。上記のローカルストレージやセッションストレージのサンプルコードをネットで書かれていましたが、少し難しかったので、今回はJQueryを使うことにしました。解決方法を記載しました。 感謝い致します。
guest

0

自己解決

html

1<head> 2 <script src="jquery-3.6.0.min.js"></script> 3 4<!--==============ロード画面の外部アクセス非表示===============--> 5<script> 6 $(function () { 7 var webStorage = function () { 8 if (sessionStorage.getItem('access')) { 9 /* 10 2回目以降アクセス時の処理 11 */ 12 $(".loading").addClass('is-active'); 13 } else { 14 /* 15 初回アクセス時の処理 16 */ 17 sessionStorage.setItem('access', 'true'); // sessionStorageにデータを保存 18 $(".loading-animation").addClass('is-active'); // loadingアニメーションを表示 19 setTimeout(function () { 20 // ローディングを数秒後に非表示にする 21 $(".loading").addClass('is-active'); 22 $(".loading-animation").removeClass('is-active'); 23 }, 6000); // ローディングを表示する時間 24 } 25 } 26 webStorage(); 27}); 28 </script> 29<!--==============ロード画面の外部アクセス非表示ここまで===============--> 30</head> 31 32<body> 33<!--====ページ読み込み前のロード画面====--> 34<div class="loading"> 35 <div class="loading-animation"> 36 <div class="loader">Loading...</div> 37 <div class="load_h"> 38 <p>Loading...<br> 39 キャンペーン中につき<br>現在注文が殺到しております。</p> 40 41 <div> 42 <div class="load_h2"> 43 <p> 44 ただいまアクセスが集中しておりますので、<br> 45 ページの表示までに数秒お時間<span></span>いただく場合がございます。 46 </p> 47 </div> 48 <img src="https://web-creates.com/wp/wp-content/uploads/2021/06/logo.png" class="frog" alt="ひよこ" > </div> 49 </div> 50 </div> 51 </div> 52<!--====END ページ読み込み前のロード画面====--> 53</body>

投稿2022/12/20 08:23

編集2022/12/22 02:14
ghtew2

総合スコア245

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2022/12/20 09:18

ソースは全体的にマークダウンしてください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問