Put this near the top of the head section
<!-- CAUSE PAGE TO FADE IN ONCE LOADED - 1ST PART -->
<style>
body {
display: none;
}
</style>
<!-- LOAD JQUERY LIBRARIES -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <!--Should be first script imported/first script on the page-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
Put this after the </body> tag
</body>
<!-- CAUSE PAGE TO FADE IN ONCE LOADED -2ND PART -->
<script type="text/javascript">
$(window).load(function() {
// When the page has loaded
$("body").fadeIn(2000);
});
</script>
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.