2

私たちのアプリケーションの読み込みプロセスは時間がかかるため、アプリが機能していて単に読み込み中であることをユーザーに示すために、読み込み/初期化インジケーターを提供したいと考えています。WL のビジー インジケーターを使用してみましたが、アプリのライフサイクルの早い段階で、その可用性が完全ではないようです。そのため、単一ページのアプリケーションで読み込み表示を使用して単純な DIV を作成しました。アプリの読み込みが完了したら、非表示にします。アプリを最初に実行したときは問題なく動作します。将来の実行は異なる動作をします。

First Run : すぐに表示され、アプリの初期化が完了すると非表示になります。
後続の実行: 最初のプレゼンテーションでは表示されず、アプリが初期化を完了して通常のフローを開始する直前にすばやく点滅します。

ローディング DIV (私はこれを完全に静的にし、JS や CSS に依存しないようにしました):

    <div id="loadingInd"
         style="z-index:1;position:absolute;left:85px;top:185px;display:block;">
         Loading2...
    </div>

コードを隠す:

    $('#loadingInd').hide()

ローディングプロセスに関するちょっとした情報：

アプリケーションで使用されるすべての JS および HTML ファイルをプリロードします。これをより遅延読み込みプロセスに変更する作業が進行中ですが、完了するには優先度リストが十分に高くなっていません。すべての JS ファイルと HTML ファイルが読み込まれると、UI ウィジェット (メニュー、ログイン ボタンなど) が表示されます。ローディングが完了するまで、ローディングのスプラッシュスクリーンが表示されます。そのため、loadingInd DIV はスプラッシュスクリーンの単なる静的コンテンツです。私が理解していないのは、アプリが最初に実行されたときにスプラッシュスクリーンの残りの部分ですぐに表示されるのに、その後の実行ではずっと後まで表示されない理由です。点滅しているように見えるのは、hide() の呼び出しの直前に描画されているためだと思います。この異なる描画動作を引き起こす可能性のある後続の実行について何かありますか? 私'

ここで少し議論した後、busyIndi​​cator を試すことに戻りました。すべてのコンテンツのロードを開始する直前に表示し、ウィジェットのロードを開始する準備ができたら非表示にします。上記の DIV と同じように動作します。作画に何か問題があると思います。

4

1 に答える 1

0

私はこれを自分のウェブサイトで使用しました。編集: 動作中の jsfiddle へのリンク: http://jsfiddle.net/sYghV/4/

$(window).load(function() {
$("#pageLoadingMessage").fadeTo("fast", 0, function() {
      document.getElementById("pageLoadingMessage").style.zIndex="-100";
    });
});

html:

<div id="pageLoadingMessage"> 
<p style="top: 50%; position: absolute; left: 50%;">
<img src="http://sierrafire.cr.usgs.gov/images/loading.gif" style="width: 24px; height: 24px;">
</p> 
</div>

CSS:

#pageLoadingMessage {
background-color: gray;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
text-align: center;
vertical-align: bottom;
}
于 2013-08-18T18:01:20.760 に答える