如何消除页面切换之间的闪烁？ （JQuery 手机）

Question

我遇到的问题是，当我的 if/else 语句将用户定向到另一个页面时，在它到达正确的页面之前它会闪烁到索引（HTML 文档的第一页）在重定向到正确的页面之前大约 1/2 秒，我需要删除这个闪烁。我该怎么做？我需要使用某种 AJAX 吗？

我正在使用 HTML、JavaScript、JQueryMobile 和 PhoneGap。一个页面架构，所有页面都在一个 HTML 页上。

查看下面的代码，问题是当用户被定向到 #page4 和 #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>

Answer 1

首先，您混合使用了不同的技术。就目前而言 - 你的问题是无法解决的。通过使其易于管理来开始调试。

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

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

---

1. 如果您仍然看到闪烁 - 删除所有业务逻辑脚本，但我在此答案中给出的脚本除外。进行测试

2. 如果您仍然看到闪烁 - 关闭您的 PhoneGap。进行测试

3. 如果您仍然看到闪烁 - 删除其他页面的所有内容 - 但将文本放入其中 'this is page #' - 并添加页面名称。进行测试

4. 如果您仍然看到闪烁 - 请在此处提供您的结果列表 HTML。这将是重现错误的起点。

报告您的测试结果。如果闪烁停止 - 告诉它是哪一步造成的。

我认为这个调试会话不会很快给出结果，但它会是一个有条不紊地定位 bug 的过程。