FOUC aka ‘flash of unstyled content’ is a bit of a pain after a layout has been put together but does not load without that flash of odd content jumbled up on load.
Using a snippet of jQuery by adding and later removing a CSS class of hidden to the html element but then showing it all when the document is ready is a good way to combat FOUC.
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
}
Add in your functions.php
22 comments
Joe
Works great but just wondering, are there any negatives to implementing this?
Such as, does it slow down website loading, etc?
Alexandra Amadiz
Hi: I used this snippet in Code Snippets, but it comes back with an error:
The snippet has been deactivated due to an error on line 7:
Cannot redeclare function fouc_protect_against.
Line 7 is ?>
What am I doing wrong?
Neil Gowran
Seems like the snippet is in the file twice
seki
left a thanks comment but thought I would let people know how I implement this in wordpress.
I use a Code Snippet plugin to add stuff like this – avoids getting trashed by theme updates – not that people use themes these days.
I add a new snippet paste the code in .. call it something like FOUC fix set the priority to 1 save / activate and boom problem solved.
seki
Nice work – thanks for this!
kevin
Any idea where i can place the code in divi?
Neil Gowran
You need to add it to your themes functions.php file
Charly
Usualy I don’t let comment but for this time… just thank a lot….
DMND
After update on WordPress 5.6 the flash is back. Is there a new code necessary?
Sharon
Got a Wordfence error. Whitelisted it but are there any concerns I should know about?
Potentially unsafe operation detected.
John
You are the best !! Had a FOUC problem problem at work and this worked perfectly ! Thank you so much !!
Pearl
Thank you! Worked like a charm
Suzy Loonam
Thanks so much for this. I’ve been asking my theme support people to help and they kept wanting to help me remove my sticky nav bars. I sent it to them for the next person who pays attention to details. :) big, big thanks!
Jussi
Hi,
is this piece of code now working, and could you provide help of using it?
So can I just place it one the additional CSS box or HTML box?
So far i am only generating errors :).
And do you know if this code is going to fix my text flashing problem on my site
https://www.jussitamminen.com/ ?
Thank you in advance!
br
Jussi
Jussi
Ok,
I read the post better and added the code into correct functions.php file.
However, this code did not remove the problem and it also made the page much slower.
Jussi
John
Thanks! It’s working!!
Taha
Does not fix the flash of unstyled content on my website
Mike
I’d been looking for ages for a solution to this – THANK YOU! Works great.
Jegkiralyfi
Works perfectly! Thanks for that!
jim
Thanks, it works now!
jim
I tried this but it made the whole page white and never loaded the content, even after waiting a while.
Neil Gowran
I had an error in the code, have updated it now.