ページの読み込み完了後に表示させる | 電脳備忘録

一応キャッシュを取ることでアクセスを減らし、WEBAPIへのリクエスト量を減らしているつもりですが、私の設計がアレなのか読み込みに時間がかかってしまいます。
読み込んでいる間中途半端に画面が表示され、クリックしてもリンクやボタンが有効になっていないと、使っている側はストレスですよね。
解決策をGoogle先生に問い合わせたら、まんまそのものの答えがあったので早速利用させていただきました。

実現したいこと

ローディング画面を表示し、読み込みが完了したらページを表示する。
OKWaveにあった質問とその回答を参考にさせていただきました。

ページの読み込みが完了してから表示させるには？

上記質問の回答を元に自分用に書き換えました。読み込み時にローディング用の画像を表示させています。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf8"> 
<!-- 処理完了後にページを表示させる -->
<script type="text/javascript">
window.onload = function() {
document.getElementById('complete').style.display = 'none';
document.getElementById('loading').style.display = 'block';
</script>
<title>サイトタイトル</title>
</head> 
<body>
<div id="complete"><img src="./img/loadinfo.gif"></div>
<div id="loading">
<!--　内容 -->
</div><!-- #loading -->
</body>
</html>

CSSは適当に

/*読み込み処理*/
#loading {display: none;}
#complete {margin:0 auto;padding:0px;width:980px;background:#FFF;text-align:center;}

これでページ読み込み時にローディング画面を表示し、読み込み完了後に表示するようにできました。しかし根本的な解決としては、どうすればページ表示が軽くなるか検証する必要がありますね･･･。