14

次のコードがあります。

HTML:

<link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>

JS:

$(document).on({
  ajaxStart: function() { 
    $.mobile.loading('show');
    console.log('getJSON starts...');
  },
  ajaxStop: function() {
    $.mobile.loading('hide');
    console.log('getJSON ends...');
  }    
});

現在、Jquery Mobile 1.3.1 を使用しており、このコードを mozilla firefox と google chrome でテストしています。後で phonegap アプリで使用します。

JSON を読み込んで、リストビューで画面に表示しています。ロード中に、プログラムに「ロードスピナー」を表示させたい。コンソール ログは ajaxStart が起動していることを示していますが、画面のどこにもビジュアル スピナーはありません。

私は何を間違っていますか？助けてください！

前もって感謝します。

4

4 に答える 4

50

次の正常な実行に関する情報が不足している jQuery Mobile ドキュメントはどれですか。

$.mobile.loading('show');

と

$.mobile.loading('hide');

イベント期間中のみ表示されます。pageshowそれ以外の場合はsetinterval、次のように にラップする必要があります。

pageshowjQuery Mobile ページのその他のイベントについて何も知らない場合は、このARTICLEを参照してください。これは私の個人的なブログです。または、こちらをご覧ください。

AJAXまず、間隔を設定せずにローダーを表示/非表示にすることはできません。これがなくても可能な状況は 1 つだけで、それはpageshowイベント中です。それ以外の場合setintervalは、ローダーをキックスタートする必要があります。

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

    var interval = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(interval);
    },1);    

    var interval = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(interval);
    },1);
于 2013-04-29T11:45:28.150 に答える
2

AJAX呼び出しの中で？（ただし、どこでも動作します）

$.ajax({ url: ..., 
    type:'post', dataType:'json',
    data:{ d: ... }, 
    beforeSend: function() { fSpinner('show'); },
    complete: function(){ fSpinner('hide'); },
    success: function( res ){...},
    error: function(e){ alert('Error: ' + e.responseText) }
});

そして関数自体：

function fSpinner( strShowOrHide ) {
    setTimeout( function(){
        $.mobile.loading( strShowOrHide );
    }, 1); 
}
于 2015-02-14T14:47:01.500 に答える