jQuery .ajaxStart() 和 .ajaxStop()

页面加载时使用Loading效果

最新推荐文章于 2022-01-17 19:07:09 发布

原创最新推荐文章于 2022-01-17 19:07:09 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #json #php #ViewUI

jQuery 专栏收录该内容

2 篇文章

订阅专栏

原创转载请注明出处：http://agilestyle.iteye.com/blog/2317095

通常在系统间进行页面交互的时候，由于数据以及网络IO的原因，为了更好的用户体验，我们会对页面进行Loading的设计，比如：

GET提交

$.get("data.php", $("#firstName.val()"), function(data){
	$("#getResponse").html(data);	//返回的data是字符串类型 
});

POST提交

$.post("data.php", $("#firstName.val()"), function(data){
	$("#postResponse").html(data.name);
},"json");	//设置了获取数据的类型，所以得到的数据格式为json类型的

Ajax提交

$.ajax({
	url: "ajax/ajax_selectPicType.aspx",
	data: {Full:"fu"},
	type: "POST",
	dataType: 'json',
	success: CallBack,
	error: function(er){
		BackErr(er);
	}
});

当我们进行Ajax请求时候，我们就可以使用jQuery提供的.ajaxStart() 和 .ajaxStop() 方法加载一段Loading的CSS的就OK啦

Loading的CSS

<!DOCTYPE html>
<html>
<head>
	<title>5 pulse</title>
	<style type="text/css">
	.sk-spinner-pulse {
	  width: 40px;
	  height: 40px;
	  margin: 40px auto;
	  background-color: #333;
	  border-radius: 100%;
	  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
			  animation: sk-pulseScaleOut 1s infinite ease-in-out; }

	@-webkit-keyframes sk-pulseScaleOut {
	  0% {
		-webkit-transform: scale(0);
				transform: scale(0); }
	  100% {
		-webkit-transform: scale(1);
				transform: scale(1);
		opacity: 0; } }

	@keyframes sk-pulseScaleOut {
	  0% {
		-webkit-transform: scale(0);
				transform: scale(0); }
	  100% {
		-webkit-transform: scale(1);
				transform: scale(1);
		opacity: 0; } }

	</style>
</head>
<body>
	<div class="sk-spinner sk-spinner-pulse"></div>
</body>
</html>

Loading的JS

在Ajax请求开始的时候，显示Loading的CSS，在Ajax请求结束的时候，隐藏Loading的CSS

$(document).ajaxStart(function() {
	$(".sk-spinner").show();
}).ajaxStop(function() {
	$(".sk-spinner").hide();
});

参考资料：

http://api.jquery.com/ajaxStart/

http://api.jquery.com/ajaxStop/

http://www.jb51.net/article/43194.htm

http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html