ARTEMIS

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

■解説
サンプル1-1とサンプル1-2は、ロード待ちの間もページが表示されていきます。
その為スクロールされると表示中が見えなくなるので、この1-2はスクロールを追いかけて常に表示をします。 1-1との違いは、処理中表示がスクロールにあわせて動く事だけです。

アニメGIFをまず表示してドキュメントのロードが終わったら表示を隠します。 この方法の場合は、ロード中読み込まれたコンテンツがどんどん表示されます。
全てが読み終わる(ドキュメント・画像のロードなど)と、ロード中の表示が消えます。

IE6、NN6?以上では確実に動作すると思います。。
ネット上にJavaScriptライブラリなどが増えた現在の状況を考えて、 他のスクリプトと干渉せずに共存できる事を下位互換よりも優先した為に、 DOM以前のブラウザやIE4、5レベルでのJavaScriptと互換性がないかもです。 確認済みはIE6、Netscape7、FireFox2、Safari3、Opera9 です。

このサンプル画面のソースはそのまま使えません。
配布ページのスクリプトを使ってください。

よほど大きなページで無い限りは普通のHTML読込ではほとんど表示されません。

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

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

■ 使用してる 変数 など
グローバル関数名として LoadingMsg() を1個使用しています。
IDとして Loadouter 、 Loadinner の2個を使用しています。

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

function LoadingMsg(){

処理

};
LoadingMsg();
;(function(){

処理はそのまま

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

■イベント
ウィンドウオンロードで表示中画像を消します。
ウィンドウスクロールで表示中画像を移動させています。
どちらもメソッドによるイベント付加なので、他のスクリプトのwindow.onloadと干渉しあいません。 ウィンドウスクロールは表示を消した後はイベントも消去しています。