サンプル3

このデモサンプルはサンプル表示用でロード待ちではなくセットタイムアウトで実際の『表示例』を演出しています。スクリプトは配布用のテキストエリアの物を使ってください。

■解説

BODY内を先に非表示にしておくとJavaScriptOFFの環境の人がページを見れなくなるので、 JavaScriptを使ってBODY内(設定したDIV内)を非表示にします。
まだ読み込まれていないHTMLエレメントなのでCSSへの追加と言う形を取ります。
CSS追加はメソッドを使わずタグ打出しで済ませています。

ロード中はアニメGIFを表示し、ロードが終わったら処理中表示を消してBODY内を表示させます。ネット上にJavaScriptライブラリなどが増えた現在の状況を考えて、他のスクリプトと干渉せずに共存できる事を下位互換よりも優先しました。 DOM以前のブラウザやIE4、5レベルでのJavaScriptと互換性がないかもです。確認済みはIE6 - 7、Netscape7、FireFox2、Safari3、Opera9 です。

■使い方
BODY内の非表示にさせる部分全体を DIV で囲み、IDをinbodyとします。
別のIDにしたい場合はスクリプト内の『inbody』の文字をそのIDに変えてください。

HEAD内の最後(なるべくBODYに近い位置)にまたはBODYタグ直後にスクリプトを書きこむか、外部ファイルとして読み込ませるようにしてください。

デフォルトではHTMLファイルと画像は同じディレクトにある事を前提にしています。
複数ページで共通ファイルとして使う場合は、画像指定をhttpからのフルパスにすると便利です。

■ 使用してる変数など
グローバル関数名として LoadingMsg() を１個使用しています。
IDとして Loadouter 、 Loadinner の２個と、デフォルトではBODY内の非表示用の inbody で計３個使用します。

■ グローバル関数名を使わない方法

function LoadingMsg(){

処理

};
LoadingMsg();

を

;(function(){

処理はそのまま

})();

の様に、最初の行と最後の行を書き換えて無名関数の実行形式にしてください。

■イベント
ウィンドウオンロードで表示中画像を消し、BODY内を表示にしています。
メソッドによるイベント付加なので、他のスクリプトのwindow.onloadと干渉しあいません。