Phonegap iOSアプリ、Jquery Clickイベント

Question

私はバックボーンを使ってすべての自分のビューを作成しています。私の見解の中には、リソースを大量に消費するものがあり、テンプレートに読み込むのに時間がかかります。だから、いくつかの線をクリックすると、私は最初にロードオーバーレイを表示し、ビューがレンダリングされるときに削除したいと思います。

$('.class').live('click', function(){ 
    $("#loading").fadeIn(); 
    // this changes the url and then the view is called. 
}); 

しかし、問題は読み込みがビューがレンダリングされた後だけになることです。どうしてこれなの？ここのイベントパターンは何ですか？リンクをクリックすると、最初にURLをロードしてから、クリックコールバック内のものだけがロードされます。 も、このことは同じことをして：

$('.content a').click(function() { 
    var f = $(this); 
    $("#loading").show(); 
    Backbone.history.navigate(f.attr("href"), true); 
    return false; 
}); 

Answer 1

これは、イベントの可能性配列である。

1. をクリックして起こります。
2. $("#loading").fadeIn();が呼び出されます。
3. URLを変更すると、ルーターがアクティブになります。
4. ビューがアクティブになり、レンダリングを開始します。
5. ビューのレンダリングが終了しました。
6. ブラウザが再び制御を開始し、作業バックログのクリアを開始します。特に、ブラウザはからfadeInになります。たとえば、

、何をこのような単純なものを参照してください。

$('button').click(function() { 
    $('div').after('<p>Loading...</p>'); 
    for(var i = 0; i < 10000; ++i) 
     $('div').text(i); 
});​ 

デモ：http://jsfiddle.net/ambiguous/sEvv5/

あなたは10000まで、またはコンピュータがどのくらいの速に応じて、ダウンしていることを調整する必要があるかもしれません。

あなたが行う必要があるのは、#loadingを置いたときから高価なレンダリングのレンダリングを開始するまでの間にブラウザに手を戻すことです。一般的な方法は、タイムアウトがゼロのsetTimeoutを使用することです。例えば：

$('button').click(function() { 
    $('div').after('<p>Loading...</p>'); 
    setTimeout(function() { 
     for(var i = 0; i < 10000; ++i) 
      $('div').text(i); 
    }, 0); 
});​ 

デモ：http://jsfiddle.net/ambiguous/qd9Ly/

あなたのケースでは、setTimeoutで// this changes the url and then the view is called.一部を入れてみてください。