1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Prevent flickering pages

  1. tenants

    tenants Well-Known Member

    tenants submitted a new resource:

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

    Read more about this resource...
     
  2. Mike

    Mike XenForo Developer Staff Member

    XenForo automatically applies a hasJs class to the <html> tag - you should simply be able to react to that.
     
  3. tenants

    tenants Well-Known Member

    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: Jun 20, 2013
  4. tenants

    tenants Well-Known Member

    @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: Jun 20, 2013
  5. tenants

    tenants Well-Known Member

    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: Jun 20, 2013
  6. erich37

    erich37 Well-Known Member

    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.... ?
     
  7. tenants

    tenants Well-Known Member

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

Share This Page