処理中表示の汎用スクリプト と アドオン サブスクリプト

HTMLページが完全にロードされるまで、または、JavaScriptやCGI、PHPでの処理で処理が終わってロードがすむまでの間に 『お待ちください』『処理中』などの表示をする方法です。

処理中表示１の基本的な方法を設定変更で可能なように汎用化したものです。 また、表示も画像・文字・innerHTMLによるJavaScriptのコントロールも出来るようにしてあります。
アドオンのサブスクリプトもいくつか用意してあります。

---

汎用ベーススクリプトとCSS

---

[ 基本的スクリプト ベース ]

■ベースサンプル 整理済 base.htm

処理中表示1の複数のスクリプトを1つにまとめて、設定で使い分けられるようにした汎用ベースです。 JavaScript、CSSを 外部ファイル化してHTML内には外部ファイルへ読み込みタグを書くだけにしてあります。
説明等はサンプルページに書いてあります。

Shift_JIS、改行コード CR+LF の３つのファイルが入ってます。
サンプル画像は入っていません。

---

アドオン サブスクリプトとCSS

---

ベーススクリプトの下にこのサブスクリプトを読み込む記述をすれば利用できます。 同時に複数は使えません。 アドオンによってはベースのCSSの変更も必要です。 配布ZIPにはベースとアドオン両方入っています。

---

■アドオン サンプル１ sample1.htm

ベーススクリプトにアドオンサンプル１を追加した物です。
同じ文字を繰り返す事でバー表示させるタイプです。
サンプル画面の方にも説明があります。

Shift_JIS、改行コード CR+LF の４つのファイルが入ってます。

---

■アドオン サンプル２ sample2.htm

ベーススクリプトにアドオンサンプル２を追加した物です。
画像を使わず、CSSコントロールでバーを表示させています。 サンプル画面の方にも説明があります。

Shift_JIS、改行コード CR+LF の４つのファイルが入ってます。

---

■アドオン サンプル３ sample3.htm

ベーススクリプトにアドオンサンプル１を追加した物です。
アドオン２のバーが伸縮するタイプです。
サンプル画面の方にも説明があります。

Shift_JIS、改行コード CR+LF の４つのファイルが入ってます。

---

■アドオン サンプル４ sample4.htm

ベーススクリプトにアドオンサンプル１を追加した物です。
数字を単純にカウントアップしています。
ちょっと工夫すれば、カウントに合わせて色表示を変えたりなどもできます。
サンプル画面の方にも説明があります。

Shift_JIS、改行コード CR+LF の４つのファイルが入ってます。

---

■アドオン サンプル５ sample5.htm

ベーススクリプトにアドオンサンプル１を追加した物です。
NNならベーススクリプトにHTML記述すれば可能なBlinkです。
IEでもBlinkさせる為に、サブスクリプト化してあります。
サンプル画面の方にも説明があります。

Shift_JIS、改行コード CR+LF の４つのファイルが入ってます。

---

■アドオン サンプル６ sample6.htm

ベーススクリプトにアドオンサンプル１を追加した物です。
タイプライター表示タイプです。
サンプル画面の方にも説明があります。

Shift_JIS、改行コード CR+LF の４つのファイルが入ってます。

---

■アドオン サンプル７ sample7.htm

ベーススクリプトにアドオンサンプル１を追加した物です。
タイプライターをもう少し、スクリプトらしく見栄え良くした物です。
サンプル画面の方にも説明があります。

Shift_JIS、改行コード CR+LF の４つのファイルが入ってます。

---

[ アドオン サブスクリプトについて ]

特に複雑な事をしてるわけではなく、本来ベーススクリプトで表示する文字列部分のinnerHTMLを あとから付け足すJavaScriptで表示をコントロールして遊んでるだけの物です。

読み込みと同時にページに表示されるような方法と何の代わりもありません。 例えば日付を取って加工して表示するとか、クッキーを読み出して表示するとか、 JavaScript経由、HTMLで表示する事ができる物であればなんでもOK。
動作に関しては自分なりに作りこめばいくらでも工夫できますし、 ウィンドウ全面でお待ちください表示するなどの工夫も可能です。 私が使ってる方法でなくても、処理中表示のタグのinnerHTML に適当に好きな方法で好きな文字を入れ込んだりする関数なりを作って実行するだけです。

基本的構造
ページ上部で読み込みと同時に動き出す物なので

ベーススクリプトには document.all() または document.getElementById()でターゲットを指定する為の処理関数として、 Cset.by() が用意されています。
グローバル変数を使わない方法では無理ですが、1個使う方法であればCset.by()を別のスクリプトからも利用可能です。

---

サーバーのレスポンスが良ければ、普通はあまり表示される事の無いお待ちください表示です。 あくまでもオマケ機能、補助スクリプト程度と考えて乱用は避けましょう。
こういう小さい所で遊んでみるのも楽しいですが、エラーを出したり閲覧前にいちいちわざとらしく待たせたりすると「うざい」ので、その辺も注意しましょう。

---