3 Replies Latest reply on Feb 5, 2017 9:16 PM by kerrishotts

    onclick redirect generates flickering

    widonwaker Level 1

      I have the following:


      <a href="#" onClick="location.href='page.html'" >New page</a>


      When I click on the link, it redirects to a new page. THe problem is it's clearly visible a flickering effect during the page transition. How to avoid this?

      This is happening on both ios and android devices.

        • 1. Re: onclick redirect generates flickering
          kerrishotts Adobe Employee

          This is why we suggest you build what are called "single page architecture" -- where there is never any navigation away from "index.html". This doesn't mean there can't be other "html" files -- just that if they are needed, they are loaded dynamically using XHR. In this way, the controlling page can provide any transition it desires by manipulating the DOM as appropriate.


          When using "multiple page architecture", you're forcing the browser to unload any existing content and then to load the new content. During that time your previous content has no control over what's happening, and so you'll typically end up with some sort of flash while the new content is loading, which is what you're seeing. Short of rearchitecting your app, there's little that can be done.

          • 2. Re: onclick redirect generates flickering
            widonwaker Level 1

            A single page app would be good for static content, but since i'm building a dynamic-content-based app , it results cleaner to build more pages (also, it's easier for maintaining the code).


            I have around 1-2 ajax requests per page and i have likes 10 pages, putting all content in the same index would result confusing...


            Isn't there something to make the navigation between more pages smoother?

            • 3. Re: onclick redirect generates flickering
              kerrishotts Adobe Employee

              Perhaps I wasn't clear -- SPA doesn't imply that you stuff everything into "index.html". What it does imply, however, is that there is only ever one dynamic DOM, and items are loaded in, rendered, and discarded as necessary. Only very simple apps can get away with having all their content in "index.html" -- most will have many files, including HTML files (usually as templates), code files, and assets.


              Data is loaded using XHR/AJAX with static content usually bundled in with a tool and navigation between views is managed with an internal router, not by navigation to a new HTML file. The latter destroys the DOM and tears down all executing code and associated contexts (resulting in flicker). The former, however, creates new DOM elements (DIVs, etc.), populates them with the necessary data, and can then animate them onscreen however it likes, meaning no flicker (assuming the animation is handled correctly).


              Of course this is easier said than done, which is why there are a large number of frameworks out there that try to make it easier for you. I'd suggest that you look at one of the popular frameworks to do this rather than rolling your own (it's harder than it looks, but if you want to see an example of a hand-rolled framework, see Mastering-PhoneGap-Code-Package/logology/src/www/js/lib at master · kerrishotts/Mastering-PhoneGap-Code-Package · GitHub ). If you're familiar with the jQuery way of things, you might like Framework7 (check out an example I wrote for a video course: GitHub - kerrishotts/PhoneGap101-Filer: Demonstration app for PhoneGap 101 video course by Packt ). Otherwise, consider Ionic, Onsen UI, Sencha Touch, or Kendo UI.


              Keep in mind that there's nothing about this that means that the app must use only static content. Complex hybrid apps are almost always built using the SPA architecture, and they can fetch, manipulate, store, retrieve, send, and transform data in all sorts of ways. It's not simple, by any stretch, but I would highly suggest you look into it; it's really the only way to build and manage complex hybrid apps long-term.


              Now, you might get around all of this (to some degree) with this plugin: https://www.npmjs.com/package/phonegap-plugin-multiview, but keep in mind that each new web view is taking up memory, which means you may quickly run the device out of memory (keep navigation stacks limited!). On Android this might mean previous items in your navigation stack are no longer reachable because they've been loaded out of memory. On iOS, this might mean your app just crashes.


              My suggestion: use a SPA framework for the most control and stability.