1

問題があります。ログインページがあります。これはモバイルアプリケーションの最初のページで、ユーザー名とパスワードの2つのフィールドと、送信ボタンが含まれています。送信時に、ajax呼び出しを実行して有効性を確認します。成功すると、ページがホームページに切り替わります。

問題：成功すると、ログインページが表示され、両方のフィールドが1〜2秒間空白になり、最後にホームページに切り替わります。非常に遅いまたは遅れています。

$(document).bind('pageshow', function () {          
            $('#loginSubmit').on("click", function(){
                    $('#loginSubmit').button('disable'); 
                    var formData = $("#loginForm").serialize();
                    console.log(formData);
                    $.ajax({
                        type: "POST",
                        url: "php/checkLogin.php",
                        cache: false,
                        data: formData,
                        success: function(data){
                            var check = $.parseJSON(data);
                            console.log(check);
                            if (check.approved == 1)
                            {
                                $.mobile.changePage('#home');
                                username = $("#username").val();
                            }
                            else
                            {
                                // wrong username or password
                            }
                        }
                    });
            }); 
        });

グローバルローディングスピナー（ここには表示されていません）を追加しましたが、それは0.5秒間しか表示されず、消えます。これをどう処理するかわかりません。

コンソールログ：

POST http://localhost/jquery/php/checkLogin.php 200 OK 1.02s
POST http://localhost/jquery/ 200 OK 48ms

最初の呼び出しは有効なチェックのようです。2番目の呼び出しはホームページの読み込みであると想定しています。

4

1 に答える 1

2

$.ajax は問題ではありません。jQuery Mobile にはいくつかのパフォーマンスの問題があります (主に Phonegap と Android プラットフォームの組み合わせ)。

あなたの場合、できることはほとんどありません。

私が見ることができることから、あなたはクリックイベントの一部として送信しています。クリック イベントには 300 ミリ秒の遅延があります。これは通常 (多くの人が fastclick 実装を使用するタイミングを理解していないため)、 fastclick : https://github.com/drowne/jquery.mobile.fastclickで修正できます。

クリック イベントの代わりにモバイル アプリ バインド touchstart イベントを作成している場合は、最悪のシナリオです。この記事を読んで理由を理解してください: Touchstart vs Click。ボンネットの下で何が起こるのですか？

最後に、ajax呼び出しが成功した状態になったが、ページがまだロードされているため、ajaxスピナーが消えました。このajaxコールポイントでまだ表示されていることに対抗するには：

beforeSend: function() {
    $.mobile.showPageLoadingMsg(true);
}

しかし、このページ イベントで彼を非表示にします。

$('#home').live('pageshow', function (event) {
    $.mobile.hidePageLoadingMsg();
});

これにより、ページが正常に読み込まれたときにスピナーが非表示になります。

于 2012-12-23T09:10:11.623 に答える