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

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

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



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


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

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

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

■ File DownLoad  =>    base.zip  

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


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


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

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

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

■ File DownLoad  =>    sample1.zip  

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


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

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

■ File DownLoad  =>    sample2.zip  

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


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

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

■ File DownLoad  =>    sample3.zip  

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


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

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

■ File DownLoad  =>    sample4.zip  

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


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

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

■ File DownLoad  =>    sample5.zip  

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


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

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

■ File DownLoad  =>    sample6.zip  

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


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

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

■ File DownLoad  =>    sample7.zip  

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


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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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