Preventing flicker when navigating between pages
by
, 08-12-2013 at 05:36 PM (65994 Views)
Pages that contain heavy script files may produce a white flash (flicker) when the user navigates between them. This flicker often occurs in IE and Chrome, less often so in Firefox. There are different solutions proposed on the Internet for solving the problem. I noticed they don't always work.
There's a good chance the flicker goes away if you do the following:
- Put your html-lines before your js-lines as much as possible. We can often move scripts (normally put in the head section of a page) to the body section (immediately before the closing body tag) without disadvantagely affecting script execution.
- Make sure an arbitrary page is preloaded before the user can open it. This can be done via a hidden iframe.
Let's assume your site contains a page a_page.html havingIf navigating to 'somepage.html' causes flicker, do the following:Code:<a href="somepage.html">some page</a>
1. Put a hidden iframe at the top of the body section of a_page.html, like so:2. Replace <a href="somepage.html">some page</a> width:Code:<iframe name="preload" style="position: absolute; width: 0px; height: 0px"></iframe>
This ensures that 'somepage.html' is in the browser cache before we land on it. (If the delay (2 secs) turns out to not be large enough, make it bigger. But often you can even make it smaller).Code:<a href="javascript: void(0)" onmouseover="frames.preload.location.replace('somepage.html')" onclick="setTimeout('location.href=\'somepage.html\'',2000)">some page</a>
I applied this technique (rather: some version of it, but that's irrelevant here) to the pages of this site (they were flickering until recently with IE and Chrome) and now the flicker has gone. If you visited this site before, please clear the browser cache before navigating between the pages.