如何清除页面切换之间的闪烁？ （JQuery手机） [英] How to remove blink between page switch? (JQuery mobile)

问题描述

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

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?

我使用HTML，JavaScript，JQueryMobile和PhoneGap。一个页面体系结构，所有页面都在一个HTML页面上。

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

查看下面的代码，问题是当用户被定向到＃page4 和＃page3 。

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>

推荐答案

首先， 。所以，它的立场 - 你的问题是难以控制。

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" );
}

---

---

1. 如果你仍然看到闪烁 - 删除所有的业务逻辑脚本与我在这个答案中给出的exeption。进行测试。

1. If you still see flicker - remove all your business logic scripts with exeption of the one I gave in this answer. Make testing.

如果您仍然看到闪烁 - 杀死您的PhoneGap。进行测试。

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.

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

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.

我认为这个调试会话不会给出快速的结果，但它将是一个朝向本地化bug的有条不紊的运动。

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

这篇关于如何清除页面切换之间的闪烁？ （JQuery手机）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！