1

Phonegap と jQuery Mobile を使用して新しいアプリを開発しています。コンテンツがまだ「読み込み中」の場合 (ページが完全に表示されていない場合)、読み込み中の画像 (jqm のデフォルトの gif アニメーション) が表示されるようにしたいと思います。

私のアプリは、次のようなマルチページ アプリケーションです。 

<div data-role="page" id="page1">
<p>Some stuff for page 1 here</p>
</div>

<div data-role="page" id="page2">
<p>Some stuff for page 2 here</p>
</div>

<div data-role="page" id="page3">
<p>Some stuff for page 3 here</p>
</div>

私は試してみます：

$(document).on('pageshow','#page3', function(){
$.mobile.showPageLoadingMsg();

// my code

$.mobile.hidePageLoadingMsg();

});

しかし、読み込み中の画像は表示されません

私は試してみます：

$(document).on('pagebeforeshow','#page2', function(){
$.mobile.showPageLoadingMsg();                         
});

と

$(document).on('pageshow','#page2', function(){

//all code

$.mobile.hidePageLoadingMsg();

});

しかし、ロードは機能しません。

jQuery Mobile で読み込み中の画像を使用する正しい方法は何ですか?

4

1 に答える 1

1

リクエストに少し問題があります。

まず、タイムアウトを設定しないと ajax ローダーの表示/非表示を切り替えることができません。これがなくても可能な状況は 1 つだけで、それは pageshow イベント中です。それ以外の場合は、ローダーをキックスタートするために settimeout が必要です (少なくとも Web Kit ブラウザーの場合、Firefox ではそのままで動作します)。

これが実際の例です: 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 の読み込みのみがカウントされます。

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

$.mobile.loading('hide');
于 2013-07-22T18:59:34.850 に答える