How to remove blink between page switch? (JQuery mobile)

问题

The issue I am having is that when my if/else statement directs the user to another page, before it reaches the correct page it flickers to the index (first page on the HTML document) for around 1/2 seconds before redirecting to the correct page, to which I need to remove this flicker. How do I go about this? Do I need to use some sort of AJAX?

I'm using HTML, JavaScript, JQueryMobile and PhoneGap. One page architecture, all pages are on one HTML page.

Looking at the code below, the problem is when the user is directed to #page4 and #page3.

function loginDB(tx) {
    var Username = document.getElementById("username").value;
    var Password = document.getElementById("password").value;
    tx.executeSql("SELECT * FROM SoccerEarth WHERE UserName='" + Username + "' AND Password= '" + Password + "'", [], renderList);
}

function renderList(tx, results) {
    if (results.rows.length > 0) {
        navigator.notification.alert("Login Success!");
        window.location = "#page4";
    } else {
        navigator.notification.alert("Incorrect, please try again.");
        window.location = "#page3";
    }
}

<form onsubmit="return loginUser()">
    <label for="username">Username</label>
    <input type="text" id="username"><br>

    <label for="password">Password</label>
    <input type="password" id="password">

    <input type="submit" value="Sign In">
</form>

回答1:

First of all, you use a mix of different technologies. So as it stands - your problem is unmanageable. Start debugging by making it manageable.

<form onsubmit="makeRedirectForTesting(); return false;">
    <input type="submit" value="Sign In">
</form>

function makeRedirectForTesting() {
    $( ":mobile-pagecontainer" ).pagecontainer( "change", "#page4" );
}

If you still see flicker - remove all your business logic scripts with exeption of the one I gave in this answer. Make testing.
If you still see flicker - kill your PhoneGap. Make testing.
If you still see flicker - remove all content from other pages - but put in them text 'this is page #' - and add a page-name. Make testing.
If you still see flicker - provide here a listing of your resulting HTML. This will be a starting point for reproducing your bug.

Report results of your testing. If flickering stops - tell which step caused it.

I think this debugging session wouldn't give fast results but it would be a methodical movement towards localizing bug.

来源：https://stackoverflow.com/questions/36036182/how-to-remove-blink-between-page-switch-jquery-mobile

标签

javascript

jquery

html

cordova

jquery-mobile