ローディング画面について

Question

<div id="loader">
  Loading <span id="load-text">0%</span>
  <div id="bar"><span></span></div>
 </div>
 <img src="素材/robbot.jpg" alt="" />

body{
	 background-color: #000; 
 }
#loader {
	font-family: 'Marvel', sans-serif;
	margin: 0 auto;
	width: 300px;
	text-align: center;
	font-size: 25px;
	color: #efefef;
	margin-top: 300px;
	display:none;
	}
#bar {
	width: 300px;
	height: 2px;
	border:1px solid #efefef;
	padding: 1px;
	margin-top: 10px;
	font-size: 1px;
	}
#bar span {
	display:block;
	width:0px;
	height:2px;
	background-color: #efefef;
	}

$(function() {
  var h = $(window).height();
 
  $('img').css('display','none');
  $('#loader').height(h).css('display','block');
  var count= 0;
 
  var timer = window.setInterval(function() {
   if (count >= 100) {
    window.clearInterval(timer);
    $('#loader').fadeOut('slow', function() {
     $('img').fadeIn('slow');
    });
    } else {
    if (count <= 100) {
     count++;
     $('#load-text').html(count + '%');
     $('#bar span').css('width', count + '%');
     }
    }
   },30)
});

【やりたいこと】
ローディング中のみローディング画面を表示させて
ローディングが完了したらローディング画面を非表示にして
トップページを表示させたい。

また、今のプログラムだと100%になったらローディング画面がfadeOutする
ようになっているのですが、ローディング完了時に100%になってfadeOutする
プログラムにしたい。なのでローディングの量?に合わせて%が増えていくようにしたい。

今回記載してあるHTMLでいうと#loaderがローディング画面で
imgがトップページという設定です。

【困っていること】
今の時点でページのローディングが完了してから0%～100%になるプログラムが発生しているので
ローディング中に0%～100%になるプログラムを発生させるため
$(window).on('load',function () {});をvar timer = window.setInterval(function() {........});に囲んでみましたが、プログラムが起動しませんでした。
プログラミングについては素人なのでそもそもそのやり方が合ってないかもしれませんが思いつくことは試してみました。

Comments

[m.ts10806]

JavaScriptのコードですがインデントが揃っていない場所があるのでそろえられた方が良いです。

[hiroki88]

見づらくて申し訳ありませんでした。
修正してみましたのでご確認お願いします。

[m.ts10806]

「質問で見せるため」というより「自分で見難くないかな？」というほうが気になりました。
いずれにしてもインデントきちんとなっていないとそれだけでバグの温床ですし問題の切り分けも難しくなるものですので。

[m.ts10806]

インデントについてはこういうサービス使っても良いかもしれません。
https://tools.m-bsys.com/development_tooles/jsbeautifier.php
※半角スペース2個よりも4個の方が見やすくなると思います。

Answer 1

ローディング完了時に100%になってfadeOutする

なっているように見えます。

なのでローディングの量?に合わせて%が増えていくようにしたい。

なっているように見えます。

今の時点でページのローディングが完了してから0%～100%になるプログラムが発生しているので

まあ、確かに$(function() {は「HTML読み込み終了したら」とイコールですからね。
とりあえず画像はJavaScriptでdisplay:none;するのではなくインラインstyleとかでdisplay:none;しておくのは必須として

<div id="loader">
  Loading <span id="load-text">0%</span>
  <div id="bar"><span></span></div>
 </div>
 <img src="素材/robbot.jpg" alt="" style="display:none;"/>

これだけでも一応「ローディング中感」は一応出ます。

---

もし「実際のページ読み込み量と連動したい」というのでしたらかなり難しい仕組みにはなります。
※ちなみに私はそこまでの仕組みを作るくらいなら画像を遅延ロードさせたりページング利用したりスケルトンスクリーン利用します。
実際に表示されるHTMLが動的に、サーバーから取得している（PHPなど）のであればAjaxと連動させればそれなりの仕組みができるかもしれませんけど。

Comments

[hiroki88]

ありがとうございました。
実際のページ読み込み量と連動したいというのが難しいことだと思っておりませんでした。
教えていただいたことを試してみます。