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

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

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

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

Q&A

解決済

1回答

523閲覧

jQuery(JavaScript)を使ってページの読み込みに時間がかかる場合のみ、ローディングのアニメーションが表示が可能でしょうか?

tkm0604

総合スコア552

jQuery

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

0グッド

0クリップ

投稿2023/02/02 14:11

編集2023/02/02 23:58

実現したいこと

ページの読み込みに時間がかかる場合のみ、ローディングのアニメーションが表示が可能でしょうか?

以下のコードでページの読み込み時に、ローディングのアニメーションを実装しました。

html

1 <!-- ローディング画面 --> 2 <div class="loader-bg"> 3 <div class="loader"></div> 4 </div> 5 <!-- ローディング画面ここまで -->

jQuery

1$(function(){ 2 //読み込みが完了したら実行する 3 $(window).on('load',function(){ 4 //ローディングアニメーションをフェードアウト 5 $('.loader').delay(600).fadeOut(600); 6 //背景色をフェードアウト 7 $('.loader-bg').delay(900).fadeOut(800); 8}); 9 10 //ページの読み込みが完了してなくても5秒後にアニメーションを非表示にする 11 setTimeout(function(){ 12 $('.loader-bg').fadeOut(600); 13 },5000); 14}

css

1/* ローディング画面背景 */ 2.loader-bg { 3 width: 100vw; 4 height: 100vh; 5 position: fixed; 6 top: 0; 7 left: 0; 8 z-index: 9999; 9 background-color: #999; 10 display: flex; 11 justify-content: center; 12 align-items: center; 13 opacity:0.4; 14} 15 16.loader { 17 margin: 100px auto; 18 font-size: 25px; 19 width: 1em; 20 height: 1em; 21 border-radius: 50%; 22 position: relative; 23 text-indent: -9999em; 24 -webkit-animation: load5 1.1s infinite ease; 25 animation: load5 1.1s infinite ease; 26 -webkit-transform: translateZ(0); 27 -ms-transform: translateZ(0); 28 transform: translateZ(0); 29} 30 31@media screen and (max-width:768px) { 32 .loader{ 33 font-size: 20px; 34 } 35 36} 37@-webkit-keyframes load5 { 38 0%, 39 100% { 40 box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); 41 } 42 12.5% { 43 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); 44 } 45 25% { 46 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 47 } 48 37.5% { 49 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 50 } 51 50% { 52 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 53 } 54 62.5% { 55 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 56 } 57 75% { 58 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 59 } 60 87.5% { 61 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; 62 } 63} 64@keyframes load5 { 65 0%, 66 100% { 67 box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); 68 } 69 12.5% { 70 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); 71 } 72 25% { 73 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 74 } 75 37.5% { 76 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 77 } 78 50% { 79 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 80 } 81 62.5% { 82 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 83 } 84 75% { 85 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 86 } 87 87.5% { 88 box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; 89 } 90} 91

しかし、先方からページの読み込みに時間がかかる場合のみ、ローディングのアニメーションが表示が可能でしょうか?という相談を受けております。

以下のように書き換えてみたのですが、今度は<div id="loading>にクラスが付与されず、ローディング画面が
消えません。。。。コードはネットの記事から参照しています。

html

1 <div id="loading"> 2 <div class="spinner"></div> 3 </div>

javascript

1window.onload = function() { 2 const spinner = document.getElementById('loading'); 3 // Add .loaded to .loading 4 spinner.classList.add('loaded'); 5}

css

1/* Loading Block */ 2#loading { 3 width: 100vw; 4 height: 100vh; 5 transition: all 1s; 6 background-color: #0bd; 7 position: fixed; 8 top: 0; 9 left: 0; 10 z-index: 9999; 11} 12.spinner { 13 width: 100px; 14 height: 100px; 15 margin: 200px auto; 16 background-color: #fff; 17 border-radius: 100%; 18 animation: sk-scaleout 1.0s infinite ease-in-out; 19} 20/* Loading Animation */ 21@keyframes sk-scaleout { 22 0% { 23 transform: scale(0); 24 } 100% { 25 transform: scale(1.0); 26 opacity: 0; 27 } 28} 29 30/* Hide Loading Block */ 31.loaded { 32 opacity: 0; 33 visibility: hidden; 34}

ページの読み込みに時間がかかる場合のみ、ローディングのアニメーションを実装可能でご教授お願いします。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2023/02/02 14:26

「Jquery ページの読み込み」って何ですか? jQuery.ajax で非同期要求を出して、出した時点から応答が返ってくるまでの間「ローディングのアニメーション」とかを出すことはできると思いますが、そういうこと?
tkm0604

2023/02/02 14:37

コメントありがとうございます。 画像などの読み込みに時間がかかるページにのみローディング画面を実装したいです。 jQueryを使ってページの読み込みに時間がかかる場合のみ、ローディングのアニメーションが表示が可能でしょうか? にタイトル変更します。
退会済みユーザー

退会済みユーザー

2023/02/02 14:51

jQuery.ajax で非同期要求を出して、出した時点から応答が返ってくるまでの間「ローディングのアニメーション」とかを出すことはできる・・・って書いたでしょ。
guest

回答1

0

自己解決

試してみたJavaScriptのコードではクラスがaddされずでしたが、jQueryで書き換えたら実装できました。
なんでJavaScriptだと動かなかったんだろ、、、、

jQuery

1$(function(){ 2 //読み込みが完了したら実行する 3 $(window).on('load',function(){ 4 $('#loading').addClass('loaded'); 5});

html

1 <div id="loading"> 2 <div class="spinner"></div> 3 </div>

投稿2023/02/02 14:57

編集2023/02/02 14:58
tkm0604

総合スコア552

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問