JQuery is really a powerful and handy JavaScript library. The page or content loading effect is very easy to implement in jQuery. Here’s a example 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 -->
</div>

2. jQuery fadeIn effect

Create a jQuery fadeIn effect when document is ready to display


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

P.S fadeIn() is the jQuery library build in function.

3. Demo

Complete jQuery codes to implement the fade in loading effect.


<html>
<head>

 
<script type="text/javascript" src="jquery.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(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>