ให้โชว์ Preloader ตอนคลิกลิงก์

ลองใช้ code ด้านล่างดูครับ ลอง copy ใส่ไฟล html แล้ว ทดสอบดูครับ
โค๊ด:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<style>

/* ----------------------------------------------------------------------------
* The Sliding Menu Effect - (http://www.entheosweb.com/tutorials/css/default.asp)
* This notice must stay intact for use
* Visit http://www.entheosweb.com/ for more
------------------------------------------------------------------------------ */

	* { margin: 0; padding: 0; }
	body { padding: 40px; background: #eee; font-family: Arial; font-size: 16px; line-height: 18px; }
#preloader {
	background: #CCC;
	position:fixed;
	left:0px; 
	top:0px; 
	width:100%; 
	height:100%; 
	text-align:center;
	color:#fff;
}
#preloader div {
	width:400px;
	margin:auto;
	height: 3px;
	text-align:center;
	border: 4px solid #111;
	overflow:hidden;
}
#preloader_image {
	position: relative;
	left:0px;
	top:-10px;
}
.images { 
 width: 300px; 
 display: inline-block;
 margin: auto;
}
.link { text-decoration: none; color: #000;  }

/* ----------------------------------------------------------------------------
* The Sliding Menu Effect - (http://www.entheosweb.com/tutorials/css/default.asp)
* This notice must stay intact for use
* Visit http://www.entheosweb.com/ for more
------------------------------------------------------------------------------ */



	.blue { background-color: #56c6d9; }
	
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript" language="javascript">


/***********************************************
* The Sliding Menu Effect - (http://www.entheosweb.com/tutorials/css/default.asp)
* This notice must stay intact for use
* Visit http://www.entheosweb.com/ for more
***********************************************/



function hide_preloader() { //DOM

$("#preloader").fadeOut(1000);
}


function show_preloader() { // แสดงโหลดแล้ว

	$("#preloader").fadeIn(1000);
	/// ให้ทำอะไรต่อ ///
	//window.location=""
}


$(document).ready(function(){

// calculate height 
var screen_ht = $(window).height();
var preloader_ht = 10;
var padding =(screen_ht/2)-preloader_ht;

$("#preloader").css("padding-top",padding "px");
$("#preloader").fadeOut(1);

});

/***********************************************
* The Sliding Menu Effect - (http://www.entheosweb.com/tutorials/css/default.asp)
* This notice must stay intact for use
* Visit http://www.entheosweb.com/ for more
***********************************************/
</script>

</head>
<body >
<input type="button" value="clcik ที่นี่ เพื่อแสดง Loading" onclick="show_preloader()">
<div id="preloader">Page loading...
<div><img src="images/loading.jpg" id="preloader_image" ></div>
</div> <!-- #preloader -->

</body>
</html>