.layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
.layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
<script>
function downLoad(){
if (document.all){
document.all["layer1"].style.visibility="hidden";
document.all["layer2"].style.visibility="visible";
} else if (document.getElementById){
node = document.getElementById("layer1").style.visibility='hidden';
node = document.getElementById("layer2").style.visibility='visible';
}
}
</script>
<div id="layer1" class="layer1_class">
<table width="100%">
<tr>
<td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
</tr>
</table>
</div>
<div id="layer2" class="layer2_class">
<script type="text/javascript">
alert('Just holding things up here. While you are reading this, the body of the page is not loading and the onload event is being delayed');
</script>
Final content.
</div>
通常、ajax経由でコンテンツをロードし、
readystatechanged
イベントをリッスンして、ロード中のGIFやコンテンツでDOMを更新する。現在、どのようにコンテンツをロードしていますか?
コードはこのようになります:
サードパーティのjavascriptライブラリはたくさんあり、あなたの生活を便利にしてくれるかもしれませんが、本当に必要なのは上記だけです。
あなたはAJAXでこれをしたくないと言いました。 AJAXはこれには最適ですが、``全体がロードされるのを待つ間に1つのDIVを表示する方法があります。 それは次のようなものです:
onloadイベントはページ全体が読み込まれるまで発生しません。 つまり、レイヤー2の
<DIV>
はページの読み込みが終わるまで表示されません。jQueryはどうですか? シンプル。..
そしてHTML ...。
そしてCSS ...。
次に、ローダーの「div」にGIFと必要なテキストを配置し、ページが読み込まれるとフェードアウトします。
まず、divにローディングイメージを設定します。 次に、div要素を取得します。 次に、cssを編集して可視性を「非表示」にする関数を設定します。 次に、
< body>
で、オンロードを関数名に配置します。#純粋なcssメソッド。
。
。
。
。
HTML5では「< progress>」要素を使用できます。 ソースコードとライブデモについては、このページを参照してください。 http://purpledesign.in/blog/super-cool-loading-bar-html5/。
これが進行状況要素です。..
これには、20から始まる荷重値があります。 もちろん、要素だけでは不十分です。 スクリプトが読み込まれるときに移動する必要があります。 そのためにはJQueryが必要です。 以下は、0から100への進行を開始し、定義された時間枠で何かを実行する単純なJQueryスクリプトです。
これをHTMLファイルに追加します。
これがあなたにスタートを与えることを願っています。
これを行うには、実はとても簡単な方法がある。コードは次のようなものだ:
そしてHTMLでは
私のページでもそのようにしたところ、とてもうまくいきました。