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

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

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

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

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



サンプル1


■ サンプル1-1
[ HEAD内に貼り付ける または 外部ファイルで読ませるスクリプト ]

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

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

■ サンプル1-2
[ HEAD内に貼り付ける または外部ファイルとして読み込むスクリプト ]

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

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

サンプル3


■ サンプル3
[ HEAD内に貼り付ける または 外部ファイルとして読み込むスクリプト ]

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

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

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

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


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

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

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

■画像






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


専用ページから申し込むと
So-netより高い3万円CB

案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 206円/月
( お試し7日間 )

CORE SERVER 428円/月
( お試し15日間 )

ロリポップ 270円/月
( お試し期間10日間 )

ヘテムル 1620円/月
( お試し期間15日間 )

さくら 129円/月
( お試し期間2週間 )

無駄な高額ドメイン管理料金払ってませんか?

バリュードメイン
ムームードメイン

お客さんに振込手数料を払わせていませんか?イーバンク銀行同士なら振込手数料無料。 オフィスで簡単振込み イーバンク銀行 ビジネス口座