13

jquery mobile を使用していますが、このコードを再現したいと思います。

$(document).ready(function () {
    $.mobile.loading('show');
});

他の機能で使用して非表示にするまで、スピナーが表示されます

$.mobile.loading( 'hide' );

document.ready() は jquery mobile 1.2 で非推奨になっていることがわかりました。$(document).on('pageinit')

しかし、コードを提案されたスピナーの自動非表示に置き換えると...なぜですか? これは新しいコードです:

 $(document).on('pageinit',function(){
     $.mobile.loading( 'show' );
 });
4

4 に答える 4

11

関連している：

この記事は、私のブログの一部としてここにあります。

解決

まず最初に、jQMページのイベントとそのフローを理解する必要があります。

$(document).on('pageinit',function(){
    $.mobile.loading( 'show' );
});

確かに次の代わりになります：

$(document).ready(function () {
    $.mobile.loading('show');
});

ただし、jQMページはいくつかのフェーズで構成されています。あなたの場合、スピナーを表示できるようにするには、pageshowイベントを使用する必要があります。スピナーを表示できるようにするには、ページを表示する必要があります。私はあなたのために例を作成しました：http：//jsfiddle.net/Gajotres/Nncem/。その中でスピナーを見るために次のページに行きます。pageshowをpageinitに置き換えて、違いを確認することもできます。

次のコードを使用する必要があります。

$(document).live('pageshow', function (e, data) {
    $.mobile.loading('show');
});

しかし、これは正しい方法ではありませんが、jQMの最良の方法は次の構文を使用することです。

$('div[data-role="page"]').live('pageshow', function (e, data) {
    $.mobile.loading('show');
});

または、単一のページにバインドする場合は、次を使用します。

$('#pageID').live('pageshow', function (e, data) {
    $.mobile.loading('show');
});

ここで、pageIDはページのIDです。

$（document）.on（'pageinit'）vs $（document）.ready（）

jQueryで最初に学ぶことは、 $（document）.ready（）関数内のコードを呼び出して、DOMがロードされるとすぐにすべてが実行されるようにすることです。ただし、jQuery Mobileでは、ナビゲートするときにAjaxを使用して各ページのコンテンツをDOMにロードします。このため、$（document）.ready（）は最初のページが読み込まれる前にトリガーされ、ページ操作を目的としたすべてのコードはページの更新後に実行されます。これは非常に微妙なバグである可能性があります。一部のシステムでは正常に動作しているように見える場合がありますが、他のシステムでは、不規則で、繰り返しの奇妙さを引き起こす可能性があります。

従来のjQuery構文：

$(document).ready() { 

});

この問題を解決するために（そして私を信じてこれが問題である）、jQueryMobile開発者はページイベントを作成しました。一言で言えば、ページイベントは、ページ実行の特定のポイントでトリガーされるイベントです。これらのページイベントの1つはpageinitイベントであり、次のように使用できます。

$(document).on('pageinit', function(){

});

さらに進んで、ドキュメントセレクターの代わりにページIDを使用できます。IDインデックスを持つjQueryMobileページがあるとしましょう：

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <a href="#" data-role="button" id="test-button">Test button</a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

インデックスページでのみ使用できるコードを実行するには、次の構文を使用できます。

$('#index').on('pageinit', function(){

});

Pageinitイベントは、ページがロードされて初めて表示されるたびに実行されます。ページを手動で更新するか、ajaxページの読み込みをオフにしない限り、再度トリガーされることはありません。ページにアクセスするたびにコードを実行する場合は、pagebeforeshowイベントを使用することをお勧めします。

これが実際の例です：http：//jsfiddle.net/Gajotres/Q3Usv/この問題を示します。

この質問に関するメモはもう少しあります。1つのhtml複数ページまたは複数のhtmlファイルパラダイムを使用しているかどうかに関係なく、すべてのカスタムjavascriptページ処理を単一の個別のjsファイルに分割することをお勧めします。これにより、コードがさらに改善されますが、特にjQuery Mobileアプリケーションを作成している間は、コードの概要が大幅に改善されます。

別の特別なjQueryMobileイベントもあり、これはmobileinitと呼ばれます。jQueryMobileが起動すると、ドキュメントオブジェクトでmobileinitイベントがトリガーされます。デフォルト設定を上書きするには、それらをmobileinitにバインドします。mobileinitの使用法の良い例の1つは、ajaxページの読み込みをオフにするか、デフォルトのajaxローダーの動作を変更することです。

$(document).on("mobileinit", function(){
  //apply overrides here
});
于 2012-12-14T16:20:58.890 に答える
3

の

$(document).on('pageinit')

メソッドは、動的なページ読み込みが発生した後に jquery mobile がトリガーするためのものです。

$(document).ready()

のように振る舞わない

$(document).on('pageinit')

ページの読み込み時に 1 回だけトリガーされるためです。

于 2012-12-14T12:12:32.770 に答える
1

試す

ショーのために

$.mobile.showPageLoadingMsg();

隠すため

$.mobile.hidePageLoadingMsg();

コンテンツを動的に追加する場合は、スピナーを非表示にする必要があります

これをチェック

于 2012-12-14T11:53:16.147 に答える
1

動的なページの読み込みが発生した場合、pageinit は使用されません。そうではありません。これは、document.ready() が 1 回しか呼び出されないためです。これは、準備ができたときに何かをしたいページが複数ある場合、それができないことを意味します。

したがって、document.ready() は 1 回だけ機能しますが、pageinit はページが初期化されるたびに機能します。

于 2012-12-14T15:35:55.097 に答える