CODEWITHSUNDEEP
htmlcss
Alegro
Alegro

Reputation: 7956

How to browse between pages without screen flickering?

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.

Upvotes: 5

Views: 15441

Answers (3)

underscore
underscore

Reputation: 67

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 '"/>';

Upvotes: 1

Adriano Repetti
Adriano Repetti

Reputation: 67118

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).

Upvotes: 3

Reflective
Reflective

Reputation: 3917

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.

Upvotes: 3

Related Questions