ページ読み込み時のスクリプト実行順序

現在Webアプリケーションを開発しておりますが、データ量が多いせいか表示に時間がかかってしまうページがあります。

そのため、表示する前にローディング画面を表示させようとしているのですが、
実行順序が制御できません。
ソースは下部を参照してください。

ページの表示に約10秒ほどかかるのですが、
ローディング画面を表示させるロジックが全てのコンテンツを読み込んだ後に動いてしまいます。
ページ読み込み後はローディング画面をクローズさせる処理を記述しているので、
一瞬チラっと表示されるだけです。

「$(function(){});」内に直接表示させる処理を記載したりもしたのですがダメでした。
お分かりになる方いらっしゃいますでしょうか？

また別件ですが、このページはローカルでは1秒程で表示されるのですが、
検証機で実装させると表示に時間がかかってしまいます。
ページ速度チェックで調べてみたところ、サーバーサイドの処理時間は問題なく、
HTMLデータ転送辺りで時間がかかっている様なのですが、
これは回線系の問題でしょうか？
（そもそもデータ転送が全て終わっていないため、DOMの読み込みが完了せずにローディング処理が実行されない？）

・ローカル
Webサーバーでのページデータの準備 228ミリ秒
WebサーバーからのHTMLデータ転送 405ミリ秒
HTML分析＋構築 436ミリ秒

・検証機
Webサーバーでのページデータの準備 576ミリ秒
WebサーバーからのHTMLデータ転送 11,465ミリ秒
HTML分析＋構築 11,481ミリ秒

<head>
<script type="text/javascript">
            var endLoad = false;

			$(function(){
				startload();
			});

			//ローディング表示開始
			function startload(){
				if(!endLoad){
					var h = $(window).height();
					$('#loader-bg ,#loader').height(h).css('display','block');
				}
			}

			//ローディング表示停止
 			function stopload(){
			  $('#wrap').css('display','block');
			  $('#loader-bg').delay(900).fadeOut(800);
			  $('#loader').delay(600).fadeOut(300);
			}

 			//全ての読み込みが完了したら実行
			$(window).load(function () {
				  endLoad = true;
				  $('#loader-bg').delay(400).fadeOut(800);
				  $('#loader').delay(200).fadeOut(300);
				  $('#wrap').css('display', 'block');
			});
		</script>
	</head>
	<body>
 		<div id="loader-bg">
			<div id="loader">
				<img src="img/loader.gif" alt="Now Loading..." />
				<p style="font-size:15px;margin-top:20px;">しばらくお待ちください。</p>
			</div>
		</div>
		<div id="wrap" style="display:none;">
                   表示させたいコンテンツ
		</div> 
	</body>

行動規範の内容に同意します

回答1件

ベストアンサー

CSS 部分を見ないと確かな事は言えませんが、

HTML
1<div id="loader">
2    <img src="img/loader.gif" alt="Now Loading..." />
3    <p style="font-size:15px;margin-top:20px;">しばらくお待ちください。</p>
4</div>

上記部分がローディング画面だと思いますが、ここを始めは display: none; にしているのではないでしょうか。
(このローディング画面は JavaScript が働かないと有効でないようですので、JavaScript 無効の環境に配慮すると「JavaScript で制御している部分は javascript で要素生成するのが個人的に良い気はします。)

Re: ryo_se さん

投稿2015/11/17 10:47

編集2015/11/17 10:53