# #Tricks

Here you'll find some useful tricks I've collected.

# Flash of Unstyled Content

It's pretty common to get a 'Flash of Unstyled Content' (FOUC) when making websites. This occurs when a page's HTML loads before the page's CSS, causing a split second of unstyled content to appear before the actual website loads.

There are a number of ways to fix this. The naive solution is to do:

<body style="visibility: hidden;" onload="js_Load()">

document.body.style.visibility = 'visible';
}

However, this will render the page invisible in browsers without Javascript.

Thus, we have to both hide and show the content with Javascript. One might try:

$(document).ready(function() {$('body').hide();
$(window).on('load', function() {$('body').show();
});
});

However, this will occassionaly not work if the body takes too long to load.

The only tag that we can guarantee will load properly is the html tag. This is our final solution:

<html>
<!-- Other stuff like title and meta tags go here -->
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('hidden');$(window).on('load', function () {
\$('html').removeClass('hidden');
});
</script>
</html>