Fix FOUC ‘flash of unstyled content’ on WordPress
Author:
wp beaches
Description:
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 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 in your functions.php
Kind:
jQuery
Javascript:
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 () {
?>
.hidden {display:none;}
$('html').addClass('hidden');
$(document).ready(function() {
$('html').show();
});
<?php
}