2012-03-12 10 views
3

ページがバックグラウンドで読み込まれている間にローダーイメージを表示するようブラウザに指示する方法はありますか?ページがロードされている間にローダーを表示するNO AJAX

私は基本的にwebviewに読み込まれるhtml5アプリケーションであるアプリケーションを構築しています。すべてのファイルはデバイス自体に配置され、サーバーとのやりとりはないため、AJAXは使用できません。

ユーザーが他のページに移動すると、すぐにローダが表示され、ページが完全に読み込まれると非表示になります。

JSを使用してこれを行うことができますか?

おかげ

UPDATE:ページがアンロードし、ドキュメント上の準備ができて、その後、しかしローダがあるなっている間にも、書類準備にローダーを示したことを示す、あなたのすべてで述べたように、私は正確にやった

ページがアンロードされ、他のページがまだダウンロードされていない間は表示されません。ローダーをページではなくブラウザーにバインドする方法はありますか?

答えて

2

ajaxを使用して他のページをロードするページ(PageLoader)があると、ローダが表示されます。

PageLoaderは、ページ名をパラメータとして使用し、ページをロードします。

+0

私は意見のAjaxをしたには、サーバが存在しない場合は、クロームでそれがクロスを見せていた動作しません。 -originのエラーですが、それはサファリで働いていました。上記の@dhineshで説明した手法を使用しました。 – Harsha

3

あなたはこの

<body> 
    <div class="LoadingStyle" id="LoadingInfo"></div> 
    <div style="visibility:hidden" id="Content"> 
    <!-- All your content goes here --> 
    </div> 
</body> 

のような何かができるとdocumentreadyに、あなたは基本的な考え方は、文書の準備ができていない間、何かを示すようになって、このような

$(function() { 
    $("#LoadingInfo").hide(); 
    $("#Content").css("visibility", "visible"); 
}); 

として行うことができます。

EDIT

あなたはそれで遊ぶことができます。コンテンツを非表示にする必要はありません。絶対配置されたdivでオーバーレイして非表示にすることができます。

+3

'display:none;'を使うか、不要なスクロールバーが表示されることに注意してください。 – PeeHaa

+0

@PeeHaa 'Content'が' display:none; 'ならば、コンテンツ内の画像は読み込まれますか? – Oybek

+1

確か:http://jsfiddle.net/nvdBU/ – PeeHaa

4

すべてのコンテンツ(位置:絶対、100%幅、高さ)に読み込み画面を配置し、ページの準備ができたらフェードアウトすることができます。

デモ:(jqueryのを使用して)負荷にhttp://jsfiddle.net/G8GkA/

<div id="page"> 
    <div id="loader"><span>loading...<span></div> 
     content.... 
</div> 

フェードアウト:

$(function(){ 
    $('#loader').fadeOut(); 
}); 
関連する問題