jQuery mobile中更快的mobile.changePage

时间:2012-12-23 03:30:47

标签: jquery jquery-mobile

我有一个问题。我有一个登录页面,这是我的移动应用程序中的第一页,包含两个字段:用户名和密码,以及一个提交按钮。提交后,我会进行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
                            }
                        }
                    });
            }); 
        });

我添加了一个全局加载微调器(此处未显示),但只显示半秒并消失。我不知道如何处理这件事。

控制台日志:

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

第一个电话似乎是有效的支票,第二个我假设正在加载主页。

1 个答案:

答案 0 :(得分:2)

$ .ajax不是你的问题,jQuery Mobile有一些性能问题(主要是将Phonegap与android平台结合使用)。

在你的情况下,你可以做一些事情。

从我所看到的,您正在提交作为点击事件的一部分。点击事件有300毫秒的延迟。这通常(通常因为很多人不明白何时使用fastclick实现)可以通过fastclick修复:https://github.com/drowne/jquery.mobile.fastclick

最糟糕的情况是,如果您要创建移动应用程序绑定touchstart事件而不是单击事件。阅读本文以了解原因:Touchstart vs Click. What happens under the hood?

最后ajax spinner消失了因为ajax调用进入了成功状态但页面仍在加载。为了反击仍然在这个ajax呼叫点显示它:

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

但是在这个页面活动中隐藏他:

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

这将在页面成功加载时隐藏微调器。