JQuery is really a powerful and handy javascript library. Page / content loading effect is very easy to implement in jQuery. Here i show some simple tips to make your web page content display a fade in page loading effect. It will make your reader a shock impression. :)

The idea is simple ~

1) Create a div block with content hide
This div block is use to implement content fade in page loading effect.

<div id="page_effect" style="display:none;">
<!-- this content is hide, need jQuery to fade in it -->
</div>

2) Create jQuery fadeIn effect when document is ready to display

$(document).ready(function(){	
	$(document).ready(function () {
		$('#page_effect').fadeIn(2000);
      });
});

P.S fadeIn is the jQuery library build in functions

DEMO here.

Here is the complete jQuery code to implement fade in loading effect :) 

<html>
<head>
<title>JQuery Page Loading Effect</title>
 
<script type="text/javascript" src="jquery.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
	$(document).ready(function () {
		$('#page_effect').fadeIn(2000);
      });
 
});
 
</script>
<body>
 
<div id="page_effect" style="display:none;">
 
<h1>JQuery Page Loading Effect</h1>
 
    This is page loading effect with JQuery 1<BR>
    This is page loading effect with JQuery 2<BR>
    This is page loading effect with JQuery 3<BR>
    This is page loading effect with JQuery 4<BR>
    This is page loading effect with JQuery 5<BR>
    This is page loading effect with JQuery 6<BR>
    This is page loading effect with JQuery 7<BR>
    This is page loading effect with JQuery 8<BR>
    This is page loading effect with JQuery 9<BR>
    This is page loading effect with JQuery 10<BR>
    This is page loading effect with JQuery 11<BR>
    This is page loading effect with JQuery 12<BR>
    This is page loading effect with JQuery 13<BR>
    This is page loading effect with JQuery 14<BR>
</div>
 
</body>
</html>