0

jQuery モバイルは、ページが読み込まれるときに適切なページ読み込みアニメーションを実行しますが、データが重いページの場合、ユーザーは、新しく読み込まれたページが表示されるまで、一時的に「白い」ページを見ることができます。それを取り除くために、次のコードを使用しています。

$.mobile.loading( 'show', {
text: 'foo',
textVisible: false,
theme: 'a',
html: ""
});

それにもかかわらず、私はまだ白いページを見ています。実際のページが読み込まれるまで、白いページにアニメーションを表示する方法はありますか? http://www.amerimark.comの Web サイトで、左側のナビゲーション ボタンをクリックしたときに読み込みメッセージを表示する方法が気に入っています。

4

1 に答える 1

0

これが実際の例です：http://jsfiddle.net/Gajotres/Zr7Gf/

$(document).on('pagebeforecreate', '#index', function(){     
    var interval = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(interval);
    },1);    
});

$(document).on('pageshow', '#index', function(){  
    var interval = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(interval);
    },1);      
});

しかし、ここでは別の問題があります。ページが十分に複雑でない限り、新しいページは非常に高速に読み込まれます。jQuery モバイルには、DOM へのページのロード速度を確認する内部タイマーがあります。ページが複雑で読み込みに 10 ミリ秒以上かかる場合は、ローダーが表示されます。それ以外の場合は、どんなに頑張ってもローダーは表示されません。

また、その 10 ミリ秒にカウントされるのは DOM の読み込みのみであることに注意してください。ページのスタイリングとトランジションは計算外です。したがって、ページの読み込みが長く見えても、DOM の読み込みのみがカウントされます。

これは非常に単純な例であり、pageshow イベントはほぼ即座にトリガーされるため、私の例ではローダーは表示されません。ただし、次の行にコメントを付けると、実際に動作する例であることがわかります。

$.mobile.loading('hide');

あなたの場合、ページが読み込まれるまで pageshow イベントが延長されるため、うまくいくはずです。

于 2013-04-24T07:49:16.493 に答える