How to view pages without flickering?

Question

I have two classic HTML pages (HTML and CSS only) and links between them.
When I click on these links, the screen flickers (it quickly runs between transitions).
I tried putting this in my head - with no result:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" /> <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" /> 

Usually I can open other sites without flickering.
The browser is Firefox 16.0.1.

Answer 1

Just change your body background to:

 body { background: url("Images/sky01.jpg") repeat scroll 0 0 #121210; font-family: Verdana,Geneva,sans-serif; font-size: 12px; margin: 0; padding: 0; } 

the background color will prevent white flickering when loading a background image.

Answer 2

Because meta is for IE only, they do not work in FF.

You cannot prevent flickering in plain HTML. The best solution I found is to replace each link to a JavaScript call where you load the page using AJAX and then you replace the document itself with new content. The page refresh will be very fast, and when loading you will not see a blank screen.

The main function might be something like this:

 function followLink(pageUrl) { jQuery.ajax({ url: pageUrl, type: "GET", dataType: 'html', success: function(response){ document.getElementsByTagName('html')[0].innerHTML = response } }); } 

Then you need to replace the links:

 <a href="mypage.html">Link</a> 

WITH

 <a href="javascript:followLink('mypage.html')">Link</a> 

More on this: replace the entire HTML document] 1 : how to replace the contents of an HTML document with jQuery and its consequences (not always so obvious).

<strong> Improvements

With this solution, you force users to use JavaScript; if it is not enabled, they will not be able to click links. For this reason, I would provide a backup. First, do not change the <a> , but decorate them (for example) with a CSS class, such as async-load . Now when loading the page, replace all href with your copy of javascript: something like this:

 jQuery().ready(function() { jQuery("a.asynch-load").each(function() { this.href = "javascript:followLink(\"" + this.href + "\")"; }); }); 

With this, you can also handle the loading animation (how it is implemented depends on what you use and your layout). In addition, in the same place you can provide fade in / out animation.

Finally, do not forget that this method can also be used for fragments (for example, if you provide a general navigation bar and replace sections of content when the user clicks on a link in the navigation bar (so you won’t need to download everything again).

Answer 3

Try inserting images as this delays the loading of the last page and therefore the white transition time

 echo '<img src="data:image/png;base64,'; echo base64_encode(file_get_contents($file)); echo '"/>';