如何消除页面切换之间的闪烁？ （jQuery Mobile）

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. 如果您仍然看到闪烁，请删除其他页面上的所有内容，但在其中输入文字“这是页面＃”，然后添加页面名称。 进行测试。

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

报告测试结果。 如果闪烁停止-找出是哪一步引起的。

我认为此调试会话不会很快产生结果，但这将是朝着本地化Bug的方向发展。