Resource icon

Preventing FOUC (page flickering when using js layout libraries) in XenForo

Overview Discussion
tenants

tenants

Well-known member
tenants submitted a new resource:

Preventing FOUC (page flickering when using js layout libraries) in XenForo - Prevent flickering pages

Firstly, what is FOUC


FOUC: Flash of Unstyled Content


Some times you will visit a page, and it will flash with an un-layed out style, and then layout correctly. Often this will be due to dependencies on libraries / JavaScript to layout the page. It will first display (very quickly) as if there was no JavaScipt, and then animate into position. This looks like a very annoying "flickering" that occurs irregularly (don't be...
Click to expand...

Read more about this resource...
 
XenForo automatically applies a hasJs class to the <html> tag - you should simply be able to react to that.
 
Okay, so I only need to create a class in the head (and no need to add the class to the dom, since it's already there):

.hasJs #container{visiblilty:hidden;}

That makes it easier.. I'll update the post with this, thanks!
 
Last edited:
@Mike, that doesn't work... it's definitely better if the class is added to the dom, rather than using .hasJs. At which point (when) are you adding .hasJs to the dom... and are you adding it within $(document).ready (which would be the issue)

Preventing FOUC using this method seems only to work when adding the class to the dom directly after defining the class

Doesnt work:
Code: 
<xen:container var="$head.script">
<style type="text/css">
.hasJs #container{visiblilty:hidden;}
</style>
<script type="text/javascript">
      $(document).ready(function() {
        $('#imgloading').show();
      });
</script>
</xen:container>

Does work:
Code: 
<xen:container var="$head.script">
<style type="text/css">
.hasJsFouc #container{visiblilty:hidden;}
</style>
<script type="text/javascript">
      $('html').addClass('hasJsFouc');
      $(document).ready(function() {
        $('#imgloading').show();
      });
</script>
</xen:container>
 
Last edited:
To really reduce FOUC
The script needs to be defined as one of the first elements in the head (before the core css), putting it in $head.script adds it to the last element... so I need to improve this (it needs to use the hook page_container_head instead of trying to add to the $head variable in the template)
I also need to use a method that doesn't depend on jquery being loaded so:

Code: 
<script>
document.documentElement.className = 'hasJsFouc';
</script>
<style type="text/css">
html .hasJsFouc #container{visiblilty:hidden;}
</style>
This can still be improved, I'll update shortly ... it still might be better to add
.hasJs #container{visiblilty:hidden;}
(but make sure it's defined before the core css, I don't know when .hasJs is added yet or how, so I'm unsure).. will update this article, it's not quite there yet
 
Last edited:
is this the flickering of "text" when you scroll "up" and "down" at a certain page ?
It looks like as if the text is trying to find its correct position, when you scroll the page.....

I have seen this here at xenforo.com and also at some other websites.
Not sure where this is coming from.... ?
 
oh wait... no it shouldn't be. The style is usually already finished rendering by that point

Fouc is more noticeable on JavaScript layouts (I'm still adding to this article, I will get there ;) )
 
You must log in or register to reply here.
Top Bottom