実現したいこと
ページの読み込みに時間がかかる場合のみ、ローディングのアニメーションが表示が可能でしょうか?
以下のコードでページの読み込み時に、ローディングのアニメーションを実装しました。
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}
ページの読み込みに時間がかかる場合のみ、ローディングのアニメーションを実装可能でご教授お願いします。
「Jquery ページの読み込み」って何ですか? jQuery.ajax で非同期要求を出して、出した時点から応答が返ってくるまでの間「ローディングのアニメーション」とかを出すことはできると思いますが、そういうこと?
コメントありがとうございます。
画像などの読み込みに時間がかかるページにのみローディング画面を実装したいです。
jQueryを使ってページの読み込みに時間がかかる場合のみ、ローディングのアニメーションが表示が可能でしょうか?
にタイトル変更します。
jQuery.ajax で非同期要求を出して、出した時点から応答が返ってくるまでの間「ローディングのアニメーション」とかを出すことはできる・・・って書いたでしょ。
回答1件
あなたの回答
tips
プレビュー