I've used a masonry library, and layed out a page using JavaScript

But, every now and then I get a flash of unstyled content for this page

I thought I has solved it by hiding the content straight away with changing the container class to hidden (in the header).. but I haven't, evey now and then i still get a flash of unstyled content.

Does anyone have any ideas of what else I could do to prevent this "FOUC"

The code is simplified as:

Code:
<head>
	<link rel="stylesheet" href="mystles.css.php?" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
	<script type="text/javascript"> $('.containerClass').css({"visibility":"hidden" });</script>
</head>

<body>

	<div id="container" class = "containerClass">
		// containes a bunch of text and images
	</div>
	
	<script>
		$(document).ready(function()
		{
			doStuff(); // do all the masonary work
			$('.containerClass').css({"visibility":"visible"});
		}
	</script>
</body>
*Note, containerClass in the css is just : .containerClass {visibility:visible;} (so this page looks okay in a non script environment)

It almost works ... most of the time, the content is hidden in container before the masonary starts animating and laying out,
but every now and then it looks like you get a flash of cached content of what the page would look like if js was off.

How to avoid, any ideas?

Example page: http://www.surreyforum.co.uk/xz-articles/