(Web design) When switching pages, how do you prevent the screen from flashing white?

Question

This is a tricky one: When you click a link on a webpage, it usually whites out the page (Poor terminology - I know), but in some cases, if the DOM is mostly the same, it transitions between the two without flashing white. The reason I want it to transition smoothly each time is that I have an effect on the links that looks best that way...

So what exactly makes it so pages with roughly the same DOM can be switched off like so? Thanks =)

Answer 1

The fact that your page whites out at the moment you navigate from one page to another page, I think you can't do anything about that since there are pretty much factors that may play a role (i.e. responsiveness of your webserver, your connection speed to the internet and so on).

However, if you really would like have a nice transition between pages, I suggest one of the following solutions:

1) Load your pages in an Iframe. When navigating from one page to another, you can show a loading message using a DIV-overlay for instance. You can hide the loading message overlay when the page have been loaded. This can be triggered using jQuery .ready() event on the child page (the parent cannot determine whether child page have been fully loaded).

Please note, in order to control the parent page from the iframed-page, all pages should be in the same domain (same-domain policy).

2) In case navigation takes place within the same app domain/website, investigate if you can do partial loading of your page content using JQuery for instance.