View RSS Feed


Preventing flicker when navigating between pages

Rate this Entry
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 having
<a href="somepage.html">some page</a>
If navigating to 'somepage.html' causes flicker, do the following:

1. Put a hidden iframe at the top of the body section of a_page.html, like so:
<iframe name="preload" style="position: absolute; width: 0px; height: 0px"></iframe>
2. Replace <a href="somepage.html">some page</a> width:
<a href="javascript: void(0)" onmouseover="frames.preload.location.replace('somepage.html')" onclick="setTimeout('location.href=\'somepage.html\'',2000)">some page</a>
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).
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.

Submit "Preventing flicker when navigating between pages" to Submit "Preventing flicker when navigating between pages" to StumbleUpon Submit "Preventing flicker when navigating between pages" to Google Submit "Preventing flicker when navigating between pages" to Digg

Updated 08-12-2013 at 05:44 PM by molendijk

Tags: None Add / Edit Tags


  1. coothead's Avatar
    Hi there molendijk,

    Have you considered those users who may have javascript disabled?

    Your site does not produce a white flash (flicker) when the user navigates.

    Unfortunately, the user is unable to navigate, as the site does not appear at all.

  2. molendijk's Avatar
    Hi Coothead,
    Thanks for your comment.
    I must say I don't care much about users who have javascript disabled. And for valid reasons.
    Less than 2% of users have javascript turned off, some say it's less tha 0.5%.
    Can we use jquery without javascript enabled? No
    How about e-banking with javascript disabled? Not possible.
    Have you tried DynamicDrive with javascript disabled? Disaster.
    It's not without reason that Firefox 23 has removed the option to disable JavaScript from the Options pane and if you had JavaScript turned off, it has been turned back on.
    It's not without reason that Chrome tells you that turning off javascript is not recommended (when you change settings).
    So if you want my site to appear, don't disable javascript (you can't drive a car without an engine, can you?).
    Updated 09-04-2013 at 11:07 PM by molendijk