Question

I have an issue. I have a login page, which is the first page in my mobile application and contains two fields: username and password, and a submit button. Upon submit, I do an ajax call to check the validity, if successful, it switches pages to the home page.

The problem: if successful, it shows the login page, with both fields blank for 1-2 seconds then finally switches to the home page. Extremely slow or laggy.

$(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
                            }
                        }
                    });
            }); 
        });

I’ve added a global loading spinner (not shown here), but that only shows up for half a second and disappears. I’m not sure how to handle this.

Console log:

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

The first call seems to be the valid check, the second one I’m assuming is loading the home page.

Answer 1

$.ajax is not your problem, jQuery Mobile has a few performance issues (mainly with Phonegap in combination with android platform).

In your case you can do few things.

From what I can see you are doing submit as a part of click event. Click events have a 300 ms delay. This can usually (usually because a lot of people dont understand when to use the fastclick implementation) be fixed with the fastclick : https://github.com/drowne/jquery.mobile.fastclick.

Worst case scenario, if you are creating a mobile app bind touchstart event instead of click event. Read this article to understand why: Touchstart vs Click. What happens under the hood?

Finally ajax spinner disappeared because ajax call entered a successful state but page is still loading. To counter that still show it at this ajax call point:

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

But hide him in this page event:

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

This will hide a spinner when page was successfully loaded.