How to browse between pages without screen flickering?

Question

I have two classic HTML pages (just HTML and CSS) and links between them.
When I click on these links, the screen flickers (it quickly goes white between transitions).
I tried to place this in the head - without result:

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

I can usually open other sites without the flickering.
Browser is Firefox 16.0.1.

just suggestion, set the body background color to the main background color of your site. Probably your main background is not white. — Reflective, Oct 29 '12 at 13:44
@Reflective, I did, and after two-three clicks without flickering - flickering starts again. — Alegro, Oct 29 '12 at 13:48
can you provide a link to your site to see what's really happening? — Reflective, Oct 29 '12 at 13:49
I've added an answer - check it - flickering is because your background color is transparent and the default page color is white — Reflective, Oct 29 '12 at 14:03

score 3 · Answer 1 · edited May 23 '17 at 12:13

That meta are for IE only, they don't work in FF.

You can't rely prevent flickering in plain HTML. The best solution I found is to replace every link with a JavaScript call where you download the page with AJAX and then you replace the document itself with the new content. Page refresh will be really fast and you won't see any blank screen while downloading.

Basic function may 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 have to replace you links from:

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

With:

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

More details about this: replace entire HTML document]1: how to replace the content of an HTML document using jQuery and its implications (not always so obvious).

Improvements

With this solution you force your users to use JavaScript, in case it's not enable they won't be able to click links. For this reason I would provide a fallback. First do not change <a> but decorate them with (for example) a CSS class like async-load. Now on the onload of the page replace all hrefs with their javascript: counterpart, something like this:

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

With this you can handle a loading animation too (how it's implemented depends on what yuo're using and your layout). Moreover in the same place you can provide fade in/out animations.

Finally do not forget that this technique can be used for fragments too (for example if you provide a shared navigation bar and a content sections replaced when user click on a link the the navigation bar (so you won't need to load everything again).

What about Google indexing? not sure google bot threats javascript as something more than a text. Actually google executes some AJAX and Javascript ... but it is constantly in development. MSN? Yahoo? — Reflective, Oct 29 '12 at 13:54
@Reflective, what is Google indexing ? I created many html pages before, with css and javascript, without flickering. — Alegro, Oct 29 '12 at 13:59
@Reflective in the "improvements" section I suggested a change to avoid these "problems" (and to let the site works when javascript isn't enabled). — Adriano Repetti, Oct 29 '12 at 14:03
@Adriano, thanks a lot. I need the time to implement and try your solution. — Alegro, Oct 29 '12 at 14:05
The flickering is bacause you have 130 k background image and you have not set a body background color. try to make your image smaller in size croping a part of ite and using repeat. Set the background color as i suggested in my answer and may be you will avoid global changes to your site. — Reflective, Oct 29 '12 at 14:10

score 3 · Accepted Answer · answered Oct 29 '12 at 14:02

3

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;
}

background color will prevent white flickering while loading the background image.

answered Oct 29 '12 at 14:02

Reflective

3,854
1
13
25

AJAX is the best think ever made for web, but it is not worthing to rewrite your whole site just to avoid flickering. Good luck. – Reflective Oct 29 '12 at 14:12
I can attest to that. You just end up opening a whole can of worms with that. – Vincent Jun 10 '14 at 21:56

score 1 · Answer 3 · answered Apr 12 '14 at 13:58

1

Try to embed pictures as it delays final page loading and therefore white transition time

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

answered Apr 12 '14 at 13:58

underscore

57
8

How to browse between pages without screen flickering?

3 Answers3