処理中表示『Now Loading』の表示 画像/GIFアニメ式

HTMLページが完全にロードされるまで、または、JavaScriptやCGI、PHPでの処理で処理が終わってロードがすむまでの間に 『お待ちください』『処理中』などの表示をする方法です。 このページではGIFアニメ(静止画でも良い)を使った方法についてです。

多くの画像を用意できれば良いのですが、まだ作ってません。 バータイプは、読み込みが終わらない場合また振り出しに戻ってしまうので、 円タイプの無限で動き続けるGIF画像が理想的かもしれませんね。

CGIでこれを使う場合は、ヘッダーからこのJavaScirptの部分までを先に打ち出しておいて、 本格処理を実行する等のタイミングの工夫が必要になります。。

BODY内を最初からCSSで非表示にする方法(サンプル２)は廃止しました。
補助機能ごときでCSS有効・JavaScript OFF の環境の場合にページが見れなくなるのも困り物なので。。

---

サンプル１

---

■ サンプル1-1
[ HEAD内に貼り付ける または 外部ファイルで読ませるスクリプト ]
<script type="text/javascript"> function LoadingMsg(){ if(self.attachEvent || self.addEventListener){ var wimg = new Image(); /*上からの表示位置 % かpxで */ var PTop = '35%'; /*表示する文字列 */ var msgs ='Now Loading......'; /*表示する『ロード中』画像 */ wimg.src = './wait30.gif'; /* 細かいCSS設定の調整は↓の１行。タグ打出し部分を調整 */ document.write('<div id="Loadouter" style="top:',PTop,';position: absolute; width:95%; z-index: 100; color:#9999cc; text-align:center;"><table id="Loadinner" style="margin:auto; border:1px solid #aaaaaa; font-size: 13px; text-align:left;"><tr><td>',msgs,'</td></tr><tr><td><img src="',wimg.src,'" border=0></td></tr></table></div>'); function by(id){ if(document.getElementById){ return document.getElementById(id).style; }; if(document.all){ return document.all(id).style ; }} function addEv(obj, type, func){ if(obj.addEventListener){ obj.addEventListener(type, func, false); }else{ if(obj.attachEvent) obj.attachEvent('on' + type, func); }} addEv(window, 'load', function(){by('Loadouter').display = 'none';}); } };LoadingMsg(); </script>

このサンプル用GIF =>
表示例サンプル =>	Sample1-1

説明はサンプルに書いてあります。
画像は右クリックで保存。または自分で用意してください。

■ サンプル1-2
[ HEAD内に貼り付ける または外部ファイルとして読み込むスクリプト ]
<script type="text/javascript"> function LoadingMsg(){ if(self.attachEvent || self.addEventListener){ var wimg = new Image(); /*上からの表示位置 px単位で数値のみ */ var PTop = 150; /*表示する文字列 */ var msgs ='Now Loading......'; /*表示する『ロード中』画像 */ wimg.src = './wait30.gif'; /* 細かいCSS設定の調整は↓の１行。タグ打出し部分を調整 */ document.write('<div id="Loadouter" style="top:',PTop,'px;position: absolute; width:95%; z-index: 100; color:#9999cc; text-align:center;"><table id="Loadinner" style="margin:auto; border:1px solid #aaaaaa; font-size: 13px; text-align:left;"><tr><td>',msgs,'</td></tr><tr><td><img src="',wimg.src,'" border=0></td></tr></table></div>'); function by(id){ if(document.getElementById){ return document.getElementById(id).style; }; if(document.all){ return document.all(id).style ; }} function addEv(obj, type, func){ if(obj.addEventListener){ obj.addEventListener(type, func, false); }else{ if(obj.attachEvent) obj.attachEvent('on' + type, func); }} function remEv(obj, type, func){ if(obj.removeEventListener){ obj.removeEventListener(type, func, false); }else{ if(obj.detachEvent) obj.detachEvent('on' + type, func); }} function scroll(){ var CurrentTop = (document.body.scrollTop || document.documentElement.scrollTop); by('Loadouter').top = CurrentTop + PTop + 'px'; } addEv(window,'scroll', scroll); addEv(window, 'load', function(){by('Loadouter').display = 'none'; remEv(window,'scroll', scroll);}); } }; LoadingMsg(); </script>

このサンプル用GIF =>
表示例サンプル =>	Sample1-2

この『サンプル１』の２つのサンプルは、どちらもドキュメントを表示させつつロードが完了するまで 『お待ちください』表示をする物です。 単純でエラーになりにくく、ソースファイル化すれば邪魔にもならない程度の簡単な物です。
このサンプル１のCSS記述は、そのままスクリプト内のタグ記述に書き込んでも構いません。 ソースファイル化させてすっきりさせる場合はその方が良いでしょう。
イベントはメソッド付加なので他と干渉しにくいですし、 グローバル関数名無しの無名関数化すればグローバル名での干渉の可能性がなくなります。 IDに関しては2個占有します。

サンプル３

---

■ サンプル3
[ HEAD内に貼り付ける または 外部ファイルとして読み込むスクリプト ]
<script type="text/javascript"> function LoadingMsg(){ if(self.attachEvent || self.addEventListener){ var wimg = new Image(); /*上からの表示位置 % かpxで */ var PTop = '35%'; /*表示する文字列 */ var msgs ='Now Loading......'; /*表示する『ロード中』画像 */ wimg.src = './wait30.gif'; /* 細かいCSS設定の調整は↓の１行。タグ打出し部分を調整 */ document.write('<div id="Loadouter" style="top:',PTop,';position: absolute; width:95%; z-index: 100; color:#9999cc; text-align:center;"><table id="Loadinner" style="margin:auto; border:1px solid #aaaaaa; font-size: 13px; text-align:left;"><tr><td>',msgs,'</td></tr><tr><td><img src="',wimg.src,'" border=0></td></tr></table></div>'); document.write('<style id="LoadingMsgCSS" type="text/css"></style>'); if(document.styleSheets[0].addRule){ document.styleSheets['LoadingMsgCSS'].addRule("#inbody","display:none",0); } if(document.styleSheets[0].insertRule){ document.styleSheets.item('LoadingMsgCSS').insertRule("#inbody { display:none }",0); } function by(id){ if(document.getElementById){ return document.getElementById(id).style; }; if(document.all){ return document.all(id).style ; }} function addEv(obj, type, func){ if(obj.addEventListener){ obj.addEventListener(type, func, false); }else{ if(obj.attachEvent) obj.attachEvent('on' + type, func); }} addEv(window, 'load', function(){by('Loadouter').display = 'none'; by('inbody').display = 'block'; }); } }; LoadingMsg(); </script>

次にBODY内で非表示にしておきたい部分、BODY直下全体をこのDIVのIDで囲むなどしておきます。

<div id="inbody"> 〜 </div>

このサンプル用GIF =>
表示例サンプル =>	Sample3

説明はサンプルに書いてあります。

---

個人的にサンプル３の方法が好きですが、現実的には1-1の方法が良いと思います。 単なる文字の多いHTMLドキュメントのサイトにはあまり有益な物ではないです。 私もこのサイトでは基本的に使っていません。 画像が多い場合やドキュメントが重い場合などに多少は向いていると思います。

JavaScriptの処理、Ajaxでの非同期通信時やCGI処理、PHPによる処理、SSIなど何らかのデータ処理を必要とする場面などで使うのが最も適切と思います。 必要な所でポイントで使ってむやみに使わない方がスマートです。
最近のレンタルサーバーは、XREAや ロリポップ、さくら(PHPはCGIのみ) の様にPHPが標準で使えるのが普通です。 ですから普通のページ打ち出しもデータ収集やコンテンツの読み込みなどの何らかの処理をしてから表示する事もごく普通にできます。 こういった何らかの処理をしてから表示する場合は、サーバーのレスポンスの状態によって遅くなる場合もあるので『おまちください』の表示をするのは有効かな？と思います。

気をつけなければいけないのが
反応の遅いアフィリエイト広告等がある場合、サンプル３の非表示の方法のはやめましょう。
ロードしてからコンテンツを表示する場合、画像などもすべて読み込まれてからの表示になります。 画像がすぐ不明とわかればロードと同じ意味を持ち処理済として流されますが、 『反応待ち中』が長く続くとページもその反応が返ってくるまでずっと表示されずに待ち続ける形になります。 これは、たかが広告や補助機能の為にページが表示されずにビジターをいらつかせると思います。

---

■画像






画像はこれを書いてる時点ではうちではまだこのサンプル用しか用意できていません。 ネット上を探せば手頃なGIFなどもありますし、 配布用ではなく個人で使う範囲なら、色々手に入ります。 アニメGIFでなくても構いません。
自分のパソコン内に検索をかけてアニメGIFを探すのも良いかも？(笑)

---