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 docume

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

---

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

2. If you still see flicker - kill your PhoneGap. Make testing.

3. 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.

4. 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.