• Resolved meadows19

    (@meadows19)


    Hi.
    Whenever I load a page that’s using Tabby Tabs, there is a second or so where the page loads the content *without* displaying the tabs. Then, after a second, the Tabby Tabs plugin loads and the content is shown in the proper tabs.

    Is there a way of preventing this Flash of Unstyled Content (FOUC) when using Tabby Tabs?

    Basically, a way to only load the content in the tabs *after* the plugin is ready and loaded?

    Here’s what I found on this topic:

    add_action('wp_head', 'fouc_protect_against');
    /**
     * Combat FOUC in WordPress
     * @link https://stackoverflow.com/questions/3221561/eliminate-flash-of-unstyled-content
     */
    function fouc_protect_against () {
        ?>
            <style type="text/css">
                .hidden {display:none;}
            </style>
            <script type="text/javascript">
             jQuery('html').addClass('hidden');
    	            
    	 jQuery(document).ready(function($) {		            
    	    $('html').removeClass('hidden');	            
    	 });  
            </script>
        <?php
    
    }

    Could this be adapted to work with Tabby Tabs?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author cubecolour

    (@numeeja)

    It is not usual to see the ‘FoUC’

    Please provide a link to a page on your site where the issue can be seen.

    Thread Starter meadows19

    (@meadows19)

    I sent you the link privately, but please feel free to reply here on this thread if that will help others who may have the same problem.
    Thank you!

    Plugin Author cubecolour

    (@numeeja)

    Please post the URL here. I can only provide free support here on the forum where ALL communication takes place on the forum and a url of a page showing the issue is provided.

    Thread Starter meadows19

    (@meadows19)

    Sure, here’s the link:

    https://www.temporary-url.com/76E

    Plugin Author cubecolour

    (@numeeja)

    I don’t see a flash of unstyled content on the page – it appears to load immediately

    Thread Starter meadows19

    (@meadows19)

    You have to click ‘continue’ on that interstitial page and you get to the page with the Tabby Tabs with quizzes inside. That page loads the tabs with a very noticeable FoUC for me.

    Plugin Author cubecolour

    (@numeeja)

    I saw the page with the tabs and it loaded fine for me.

    If things load slowly I would normally advise optimising the site files and/or upgrading to better hosting. To optimise the site files you could try using a properly configured caching or optimisation plugin such as autoptimise if one is not already used.

    Thread Starter meadows19

    (@meadows19)

    Oh okay. Thank you.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Prevent Tabby Tabs FOUC’ is closed to new replies.