5

I was wondering if there were anyways to avoid the "flicker" or to replace it with some type of other transition? I don't mind using JavaScript or jQuery if I needed to - also this is only referring to transitions from one web page to another (all are on the same site).

Thanks all!

  • What do you mean "from page to page"? Are you talking about distinct URLs within your own site? Or between your site and another? You can do something about the first by using Ajax instead of actual page navigation, but there's nothing you can do about the second. – Brian Donovan Jan 04 '11 at 22:04
  • Do you mean the flicker that happens if you dont use ajax or is there a flicker if you for example load new content to a div using ajax? If you dont want to reload a page use ajax. Make it pretty by fading some content out the first thing you do in the click handler, the fade it in when content arrives from server. – rapadura Jan 04 '11 at 22:08
  • Sorry I should have been more precise - I was referring to the transitions between pages themselves (on my site). –  Jan 04 '11 at 22:10
  • 1
    See [Flash of Unstyled Content (FOUC)](http://en.wikipedia.org/wiki/Flash_of_unstyled_content) – user229044 Jan 04 '11 at 23:09

3 Answers3

2

I believe you can use jQuery to handle transitions via something similar to this: 

<script type="text/javascript">
    $(document).ready(function() {
        $("body").css("display", "none");
        $("body").fadeIn(2000);
    });
</script>

Here is a tutorial regarding using jQuery for Page Transitions

You can also use the following line in the header section of your HTML: (IE Only)

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">

For those I would recommend a small duration (<1.0) if you just want to remove the "flicker" - but you can play around with those settings.

codechurn
  • 3,870
  • 4
  • 45
  • 65
Rion Williams
  • 74,820
  • 37
  • 200
  • 327
  • You should put the jquery page transitions before the ie only page transitions. Nobody likes a solution for only one browser. – rapadura Jan 04 '11 at 22:05
  • No Problem - I'll fix that :) Thanks – Rion Williams Jan 04 '11 at 22:06
  • Doesn't solve the flicker for me; In both Firefox and Chrome see a flash of content which suddenly vanishes and then fades back in. This is far, *far* more annoying than a [FOUC](http://en.wikipedia.org/wiki/Flash_of_unstyled_content) and adds an additional 2 seconds of load time to every single page. I cannot stress enough how much you *shouldn't* do this. – user229044 Jan 04 '11 at 23:09
  • @meagar, which one are you referring to? The IE one or the jQuery one? (I have only used the IE one personally - however found the tutorial for the jQuery method) – Rion Williams Jan 04 '11 at 23:11
  • @Rion The jQuery version. The explicit purpose of `$(document).ready` is to delay execution of code until the DOM is available. For most browsers, it will be visible by the time the `display:none` style is set on `` leading to this annoying appear/vanish/fade-in effect. – user229044 Jan 04 '11 at 23:12
  • I'll look into another solution - I wasn't able to play with the jQuery one. These even occurred in the Demo (http://www.onextrapixel.com/examples/jquery-page-transitions/) for you? – Rion Williams Jan 04 '11 at 23:14
  • @Rion Yes, I experience the same effect with Firefox, Chrome and IE. – user229044 Jan 04 '11 at 23:18
  • That's strange - I'll see if I can find more about it (I only experienced your described effect in IE8 with Compat. Mode, all other browsers rendered it as expected.) – Rion Williams Jan 04 '11 at 23:20
  • The IE specific approach will not work with IE9 in Standards Mode or IE10. – codechurn Jul 22 '14 at 15:43
0

I ran into the same issue. The code above works, just put a background color on the HTML in the css. Seems to have worked for me

user1607991
  • 29
  • 6
0

You can't really eliminate the flicker, but you can soften it, although it does add time to the transition.

// Put this in your navigation function
$("body").fadeOut(200,function(){window.location = filename);

// Make sure the body tag of the next page is hidden by default
<body style='display:none'>

// Then after loading the new page, fade it in
$(document).ready(function() {
  $("body").fadeIn(200);
});

It gets rid of the flicker but in my opinion this is just as bad because it slows down the page load quite significantly and shows the user a white screen for much longer than a flicker would. You decide.

Vincent
  • 1,741
  • 23
  • 35