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

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

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

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

Q&A

1回答

561閲覧

Javascriptでローディング画面を作りたい。

AkihiroH

総合スコア13

JavaScript

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

1グッド

2クリップ

投稿2022/10/04 14:46

前提

Javascript(Vanilla)で初回(一回目)だけ表示されるローディング画面を作っています。
二回目以降のアクセス時に、Javascriptの構文が実行される前に、ローディングの要素が見えてしまいます。

実現したいこと

  • 初回(一回目)だけ表示されるローディング画面を作りたい。
  • Javascriptの構文が実行される前に、ローディングの要素が見えてしまうのは避けたい。

該当のソースコード

HTML

1 <body> 2 <div class="page"> 3 4 <div id="js-loading" class="js-loading"> 5 <div class="js-loading__spinner"></div> 6 </div> 7 8 <!-- contens --> 9 <div class="page__inner"> 10 <ul class="page__list"> 11 <li class="page__item"> 12 <img src="../images/PaulineLoroy/1.jpg" /> 13 </li> 14 <li class="page__item"> 15 <img src="../images/PaulineLoroy/2.jpg" /> 16 </li> 17 <li class="page__item"> 18 <img src="../images/PaulineLoroy/3.jpg" /> 19 </li> 20 <li class="page__item"> 21 <img src="../images/PaulineLoroy/4.jpg" /> 22 </li> 23 <li class="page__item"> 24 <img src="../images/PaulineLoroy/5.jpg" /> 25 </li> 26 <li class="page__item"> 27 <img src="../images/PaulineLoroy/6.jpg" /> 28 </li> 29 <li class="page__item"> 30 <img src="../images/PaulineLoroy/7.jpg" /> 31 </li> 32 <li class="page__item"> 33 <img src="../images/PaulineLoroy/8.jpg" /> 34 </li> 35 <li class="page__item"> 36 <img src="../images/PaulineLoroy/9.jpg" /> 37 </li> 38 <li class="page__item"> 39 <img src="../images/PaulineLoroy/10.jpg" /> 40 </li> 41 <li class="page__item"> 42 <img src="../images/PaulineLoroy/11.jpg" /> 43 </li> 44 <li class="page__item"> 45 <img src="../images/PaulineLoroy/12.jpg" /> 46 </li> 47 </ul> 48 </div> 49  </div> 50 </body>

CSS

1.js-loading { 2 width: 100vw; 3 height: 100vh; 4 background-color: black; 5 display: flex; 6 align-items: center; 7 justify-content: center; 8 /* important */ 9 position: fixed; 10 top: 0; 11 left: 0; 12 opacity: 1; 13 visibility: visible; 14 z-index: 9999; 15 transition: 1s; 16 } 17 18 .js-loaded { 19 opacity: 0; 20 visibility: hidden; 21 } 22 23 .js-loading__spinner { 24 width: 100px; 25 height: 100px; 26 background-color: white; 27 border-radius: 50%; 28 }

Javascript

1function loadPage() { 2 const loadingElm = document.querySelector("#js-loading"); 3 loadingElm.classList.add("js-loaded"); 4 } 5 6 if (!sessionStorage.getItem("access")) { 7 // Processing at first access 8 sessionStorage.setItem("access", "first"); 9 window.addEventListener("load", function () { 10 setTimeout(loadPage, 2000); 11 }); 12 setTimeout(loadPage, 5000); 13 } else { 14 // Processing on second and subsequent accesses 15 loadPage(); 16 }

全体のコード

HTML

1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="format-detection" content="telephone=no" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <link rel="stylesheet" href="reset.css" /> 8 <link rel="stylesheet" href="layout.css" /> 9 <!-- CSS --> 10 <style> 11 .js-loading { 12 width: 100vw; 13 height: 100vh; 14 background-color: black; 15 display: flex; 16 align-items: center; 17 justify-content: center; 18 /* important */ 19 position: fixed; 20 top: 0; 21 left: 0; 22 opacity: 1; 23 visibility: visible; 24 z-index: 9999; 25 transition: 1s; 26 } 27 28 .js-loaded { 29 opacity: 0; 30 visibility: hidden; 31 } 32 33 .js-loading__spinner { 34 width: 100px; 35 height: 100px; 36 background-color: white; 37 border-radius: 50%; 38 } 39 </style> 40 </head> 41 42 <body> 43 <div class="page"> 44 <!-- loading --> 45 <div id="js-loading" class="js-loading"> 46 <div class="js-loading__spinner"></div> 47 </div> 48 <!-- contens --> 49 <div class="page__inner"> 50 <ul class="page__list"> 51 <li class="page__item"> 52 <img src="../images/PaulineLoroy/1.jpg" /> 53 </li> 54 <li class="page__item"> 55 <img src="../images/PaulineLoroy/2.jpg" /> 56 </li> 57 <li class="page__item"> 58 <img src="../images/PaulineLoroy/3.jpg" /> 59 </li> 60 <li class="page__item"> 61 <img src="../images/PaulineLoroy/4.jpg" /> 62 </li> 63 <li class="page__item"> 64 <img src="../images/PaulineLoroy/5.jpg" /> 65 </li> 66 <li class="page__item"> 67 <img src="../images/PaulineLoroy/6.jpg" /> 68 </li> 69 <li class="page__item"> 70 <img src="../images/PaulineLoroy/7.jpg" /> 71 </li> 72 <li class="page__item"> 73 <img src="../images/PaulineLoroy/8.jpg" /> 74 </li> 75 <li class="page__item"> 76 <img src="../images/PaulineLoroy/9.jpg" /> 77 </li> 78 <li class="page__item"> 79 <img src="../images/PaulineLoroy/10.jpg" /> 80 </li> 81 <li class="page__item"> 82 <img src="../images/PaulineLoroy/11.jpg" /> 83 </li> 84 <li class="page__item"> 85 <img src="../images/PaulineLoroy/12.jpg" /> 86 </li> 87 </ul> 88 <p class="page__copy"> 89 All Photo by Pauline Loroy - 90 <a href="https://unsplash.com/ja/@paulinel" target="_blank"> 91 unsplash.com 92 </a> 93 </p> 94 </div> 95 </div> 96 97 <!-- javascript --> 98 <script> 99 function loadPage() { 100 const loadingElm = document.querySelector("#js-loading"); 101 loadingElm.classList.add("js-loaded"); 102 } 103 104 if (!sessionStorage.getItem("access")) { 105 // Processing at first access 106 sessionStorage.setItem("access", "first"); 107 window.addEventListener("load", function () { 108 setTimeout(loadPage, 2000); 109 }); 110 setTimeout(loadPage, 5000); 111 } else { 112 // Processing on second and subsequent accesses 113 loadPage(); 114 } 115 </script> 116 </body> 117</html>

試したこと

こちらの記事を参考にしました。
https://freefuntimes.com/?p=637
ほぼ同じコードになりますが、記事内のDemoページでは、ローディングの要素が見えてしまう様な事はなく、私の理想の状態にありますが、どうしても同じ様に実装できずにおります。

Cocode👏を押しています

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

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

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

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

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

guest

回答1

0

初期値display:noneにしておけば良いのでは。
それか、JavaScriptでcreateElement

初回(一回目)だけ表示されるローディング画面を作りたい。

という前提で、localstorageを利用して状態を制御。
https://migi.me/javascript/popup-modal-window-only-once/
https://cly7796.net/blog/javascript/display-modal-only-on-first-access-using-webstorage/
http://webmemonote.com/webcreation/one-javascript/

投稿2022/10/04 21:40

編集2022/10/04 21:51
m.ts10806

総合スコア80705

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問