0

ページ付けされているがすべて1つのDOMであるjQueryモバイルアプリがあります。<a href="#page2">Page 2</a>しかし、リンクをクリックすると、つまり、次のページにあるものをロードするのに時間がかかる場合があることに気づきました。さらに悪いことに、jQuery mobileは最初のページの前のテキストを上に保持し、移行中にテキストと要素の両方を表示できます-とても醜いです！

私の質問は、これらのことを非表示にしたり、間にスピナーを表示して、何かが起こっていることをユーザーに示すために使用できるイベントですが、その間、タップ/クリックを満足させないように辛抱強くする必要があります。

理想的には、2つのイベントが必要です。1回のスタートと1回のストップ。したがって：

  1. event1が開始し、ページ1を非表示にして、スピナーを表示します
  2. スピナーは回転し続け、作業が行われています（グーグルマップがロードされているなど）
  3. event2が起動し、ページの読み込みが完了します。2ページ目を表示してスピナーを停止します。

何か案は？

4

1 に答える 1

1

新しいページが読み込まれる前にトリガーされるドキュメントイベント「pagebeforechange」をイベント1のトリガーに使用し、イベント2のページイベント「pageshow」を使用できます。

$(document).on( "pagebeforechange", function( e, data ) {
    showSpinner();
});

$("div[data-role]='page'").on("pageshow",function(event,data) {  
    hideSpinner();
});
于 2012-08-30T21:25:37.387 に答える