Q&A
コードのインデントをそろえて頂けますか？
直接の回答なのでこちらにコメントしますが、見た感じ#main-contentsはそもそもhiddenになっていないのでblockに切り替えてもあまり意味がないと思います。
gifのアニメーションの後にコンテンツを表示したいのですが、うまくいきません。おそらく、jQueryの9行目の#main-contentsが'block'になっていないからだと思うのですが、よく分かりません。
どなたか原因が理解できる方、よろしくお願いします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<link rel="stylesheet" href="css/styles.css"> 6</head> 7<body> 8<div id="loader-bg"> 9<div id="loading"> 10<img src="ajax-loader.gif"> 11</div> 12</div> 13<div id="main-contents"> 14<p>ここにはコンテンツが入ります。</p> 15</div> 16<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 17<script src="js/main.js"></script> 18</body> 19</html> 20
css
1#loading{ 2position: absolute; 3left: 50%; 4top: 30%; 5} 6#loader-bg { 7position: fixed; 8width: 100%; 9height: 100%; 10top: 0px; 11left: 0px; 12background: #FFF; 13z-index: 1; 14} 15body{ 16background-color: #ccc; 17} 18#main-contents{ 19text-align: center; 20margin-top: 20%; 21} 22
jQuery
1$(function() { 2var h = $(window).height(); //ブラウザウィンドウの高さを取得 3$('#main-contents').css('display','none'); //初期状態ではメインコンテンツを非表示 4$('#loader-bg ,#loader').height(h).css('display','block'); //ウィンドウの高さに合わせでローディング画面を表示 5}); 6$(window).on('load', function () { 7$('#loader-bg').delay(900).fadeOut(800); //$('#loader-bg').fadeOut(800);でも可 8$('#loader').delay(600).fadeOut(300); //$('#loader').fadeOut(300);でも可 9$('#main-contents').css('display', 'block'); // ページ読み込みが終わったらメインコンテンツを表示する 10}); 11
ありがとうございます。＃main-contentsを'none'から'hidden'に変えたら表示されました。なぜ#main-contents は'none'ではうまくいかないのでしょうか？
理由まで検証はできてませんが、別のメソッドを利用したほうが適当と思いました。回答しています。
回答2件
0
ベストアンサー
css('display','none')とか使わないですねhide()で十分
aの処理後bをして、bの処理後cをするならqueueでつなぐとかwhenで処理するとか・・・
- queue
javascript
1<script> 2$(function(){ 3 $('#c').hide(); 4 $('#a').delay(1000).fadeOut().queue(function(){ 5 $('#b').delay(500).fadeOut().queue(function(){ 6 $('#c').show(); 7 $(this).dequeue(); 8 }); 9 $(this).dequeue(); 10 }); 11}); 12</script> 13<div id="a">a</div> 14<div id="b">b</div> 15<div id="c">c</div>
- when
javascript
1$(function(){ 2 $('#c').hide(); 3 $.when($('#a').delay(1000).fadeOut()).then(function(){ 4 $.when($('#b').delay(500).fadeOut()).then(function(){ 5 $('#c').show(); 6 }); 7 }); 8});
投稿2019/07/09 04:08
総合スコア114839
0
初期表示させないならいっそのことCSSで隠しておいたほうが良いかなと。
cssを切り替えるというよりjQueryならshow(),hide()があるのでそちらを使ったほうが自然です。
css
1#main-contents { 2 text-align: center; 3 margin-top: 20%; 4 display:none; 5}
js
1$(function() { 2 var h = $(window).height(); 3 $('#loader-bg ,#loader').height(h).show(); 4}); 5$(window).on('load', function() { 6 $('#loader-bg').delay(900).fadeOut(800); 7 $('#loader').delay(600).fadeOut(300); 8 $('#main-contents').show(); 9});
ただ、今回のケースだとreadyとloadをわけなくても挙動はほぼ変わらないように思います。
js
1$(function() { 2 var h = $(window).height(); //ブラウザウィンドウの高さを取得 3 $('#loader-bg ,#loader').height(h).show(); 4 $('#loader-bg').delay(900).fadeOut(800); //$('#loader-bg').fadeOut(800);でも可 5 $('#loader').delay(600).fadeOut(300); //$('#loader').fadeOut(300);でも可 6 $('#main-contents').show(); 7});
js
1$(window).on('load', function() { 2 var h = $(window).height(); //ブラウザウィンドウの高さを取得 3 $('#loader-bg ,#loader').height(h).show(); 4 $('#loader-bg').delay(900).fadeOut(800); //$('#loader-bg').fadeOut(800);でも可 5 $('#loader').delay(600).fadeOut(300); //$('#loader').fadeOut(300);でも可 6 $('#main-contents').show(); 7});
また、そもそも#loader-bg ,#loaderは隠れているわけでもない感じなので
$('#loader-bg ,#loader').height(h).css('display','block');
のcss()は不要かなとも思います。
手元でshow()なしでやってみましたが、問題なさそうでした。
投稿2019/07/09 04:13
総合スコア80850
あなたの回答
tips
プレビュー
