<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<style type="text/css">
<!--
#loading {
position: absolute; /* ロード中に表示する文字列の絶対位置の設定（必須） */
top: 35%; /* 画面の上部からの文字の位置（必須） */
left: 45%; /* 画面の左側からの文字の位置（必須） */
font-style: italic;
font-family: Verdana;
}
-->
</style>
<script type="text/javascript">
<!--
document.write('<style type="text/css">#doc { visibility: hidden; }<\/style>');
document.write('<div id="loading">Now Loading...<\/div>'); // ロード中に表示する文字列
var i = 0;
var ele = document.getElementById("loading");
var str = ele.firstChild.data;
function char_loop(ele, str) {
ele.innerHTML = str.substring(0, i++ % str.length + 1);
}
setInterval("char_loop(ele, str);", 100);
window.onload = function() {
ele.style.display = "none";
document.getElementById("doc").style.visibility = "visible";
}
// -->
</script>
</head>
<body>
<div id="doc">
<!-- ここ（<div id="doc"> 〜 </div> の中）にページの内容（通常の <body> 〜 </body> の中身）を記述してください。 -->
</div>
</body>
</html>
サンプルを見る（ページサイズが約 1 MB あります）
ページを読み込んでいる時に "Now Loading..." のような読み込み中を演出するスクリプトです。
読み込み中に表示する文字はスクリプト内の2行目にある緑色の「Now Loading...」の部分です。ここは任意の文字に書き換えてください。ページ自体の内容は <body> の直下に <div id="doc"> 〜 </div> を記述してその中に実際に表示するページの内容を記述してください。
動作の内容としては、全ての内容が読み込まれる前（ページの読み込みが完了する以前）にスクリプトを実行させます。まず、doc という id を スタイルシートによって visibility: hidden; を適用させます。これはページ本来の内容を括った部分になります。次に、現在読み込み中というのを表示する文字を決めておきます。これには loading という id を付けておきます。この文字は setInterval によって関数 char_loop を呼び出して文字列を1文字ずつ表示させます。
1文字ずつ表示させる速さは setInterval の時間を調節してください。（ここでは100ミリ秒にしています）もし、1文字ずつ表示させるのが不要の場合は setInterval("char_loop(ele, str);", 100); の部分を削除してください。
最後にページの読み込みが完了したら window.onload = function() を実行します。ここでは loading という id のエレメント、つまり「Now Loading...」の表示を消します。そして doc という id のエレメント内の内容を表示させます。
ロード中に <body> 〜 </body> の内容ではなく、特定の部分のみに対して適用したい場合は <div id="doc"> 〜 </div> にその内容を記述して、その他の内容はこの間には記述しないでください。
ページのサイズが数キロバイト程度のページでは "Now Loading..." 等の演出が表示される前にページ自体が読み込み完了してしまいますので、ページサイズが小さい場合は効果が見られません。また、サイズが大きなページでも回線速度が高速な環境の場合ではすぐにページが読み込みが終わってしまいますので同じくスクリプトの効果が見られない場合があります。