jquery请求数据长时间loading等待效果

最新推荐文章于 2022-06-28 11:42:45 发布
最新推荐文章于 2022-06-28 11:42:45 发布
阅读量4.3k 收藏 4
点赞数 2
分类专栏： js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rzrenyu/article/details/73826067
版权
js 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
jquery
5 篇文章 0 订阅
订阅专栏

1.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" />

<script type="text/javascript" src="_scripts/jquery-2.0.2.min.js"></script>

<script type="text/javascript" src="_scripts/main.js"></script>

<style>
#loading{
	background-color: #17607d;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 1;
	margin-top: 0px;
	top: 0px;
}
#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
	}
#loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 200px;
	width: 200px;
	margin-top: -100px;
	margin-left: -100px;
	-ms-transform: rotate(-135deg); 
   	-webkit-transform: rotate(-135deg); 
    transform: rotate(-135deg);

}
.object{

	-moz-border-radius: 50% 50% 50% 50%;
	-webkit-border-radius: 50% 50% 50% 50%;
	border-radius: 50% 50% 50% 50%;
	position: absolute;
	border-top: 5px solid #FFF;
	border-bottom: 5px solid transparent;
	border-left:  5px solid #FFF;
	border-right: 5px solid transparent;
	
	-webkit-animation: animate 2s infinite;
	animation: animate 2s infinite;	

	}


#object_one{
	left: 75px;
	top: 75px;
	width: 50px;
	height: 50px;
	}
							
#object_two{
	left: 65px;
	top: 65px;
	width: 70px;
	height: 70px;
	-webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
	}
		
#object_three{
	left: 55px;
	top: 55px;
	width: 90px;
	height: 90px;
	-webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
	}
#object_four{
	left: 45px;
	top: 45px;
	width: 110px;
	height: 110px;
	-webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
	
	}	

@-webkit-keyframes animate {
 

50% {

	-ms-transform: rotate(360deg) scale(0.8); 
   	-webkit-transform: rotate(360deg) scale(0.8); 
    transform: rotate(360deg) scale(0.8); 
  }
	  
  

}

@keyframes animate {
	
50% {

	-ms-transform: rotate(360deg) scale(0.8); 
   	-webkit-transform: rotate(360deg) scale(0.8); 
    transform: rotate(360deg) scale(0.8); 
  }	
	
	}

</style>
</head>
<body>


<div id="loading" >
<div id="loading-center">
<div id="loading-center-absolute">
<div class="object" id="object_four"></div>
<div class="object" id="object_three"></div>
<div class="object" id="object_two"></div>
<div class="object" id="object_one"></div>

</div>
</div>
 
</div>


</body>
</html>

2.js 


function findQDocDefectRate(type,day) {

	$.ajax({
		async : true,
		data : {			
			type : type,
			day : day
		},
		dataType : 'json',
		type : 'post',
		url : "/touming/findQDocDefectRate",
		beforeSend: function(){  
			LayerShow(); 
		}, 
		complete: function () {
		LayerHide();  
		 },   
		success : sucFindQDocDefectRate,
		error : function() {
//			alert("error");

		}
	});
	
}


//触发遮罩层
function LayerShow() {   
//	console.log("00000000");
    $("#loading").css("display","block");  
}

//隐藏遮罩层
function LayerHide() {
//	console.log("123456789");
    $("#loading").css("display","none");
}





rzrenyu
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 引入jquery实现页面加载的LOADING效果
06-02
CSS3 引入jquery实现页面加载的LOADING效果，就是一个载入动画，一个加载的进度条效果，圆形小圆点在不断的旋转，当加载完毕后，自动消失，本页面由HTML5技术和jquery共同实现，LOADING和页面显示两者之间同样也加入了渐变动画效果，可作为一个HTML5 Loading应用的例子。
使用jquyer擴展方法定義屬於自己的氣泡提示
01-26 58
jquery很強,這一點毋庸置疑(如果你從事web開發工作,卻沒聽過jquery,那麼我建議你可以轉行了),除了其內置的方法我們還可以安裝插件,但我更喜歡自己寫的東西.如果不知道啥是氣泡,你可以看一下下邊的圖片: //擴展:气泡提示 //onfocus="$.pop(this,true,'請正確填寫項目名稱!',3,1000);" //$.pop($(this),tru...
jquery实现页面等待时的交互效果
前行
10-17 1万+
探索这个是因为前端在请求后台有时候需要较长的一段时间，如果不给不用户一些提示性的消息，如正在加载之类的，用户可能会以为页面已死，所以还是得简单的做点交互才行。 思路如下： 在触发请求后台之前便开始等待效果 在收到后台返回数据时候便取消等待效果 等待效果如何实现，这个才是主要问题 步骤： 等待效果的实现：（先直接上代码吧): test.html<!DOCTYPE html> <html> <head>
使用 jquyer datatables 组件中的ajax 功能。进行数据刷新
一个烂人的随手笔记
06-23 1万+
http://www.datatables.net/plug-ins/api/fnReloadAjax 1. 使用 datatables 中的 plug-in
Jquyer轮播带数字和提示文字
weixin_30847271的博客
09-02 127
效果图如下： 代码如下： <!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"...
JQuery、AJAX加载数据时候的loading加载动画实现步骤
热门推荐
丁员外的破草屋
12-01 1万+
对于AJAX，异步传输数据，那肯定是要等待服务器的数据返回，对于客户来说，等待数据会让他们失去耐心，一种加载动画的方式，可以让客户知道，这是需要一点时间的，客户体验比较友好，下面就来实现这个功能吧。1、设计思路，统计交易量，点击提交按钮，将日期时间段，用AJAX传给服务器，同时，加载一个等待动画比如（gif动画），当服务器传回数据到客户端的时候，输出数据，并去掉这个动画。2、编程语言及技术JavaS
jquery实现页面等待加载“转圈”效果
weixin_40362806的博客
06-28 1771
jquery点击提交的 预转圈
ajax等待请求
weixin_30752377的博客
10-11 97
1.html <div id="loading"><img src="../Content/img/loading.gif" alt="" />正在加载数据,请稍候...</div> 2.CSS #loading { width:225px; height:45px; border:3px solid #C3DAF9; position...
EBS提交请求等待请求
章
04-24 1376
-- 等待请求DECLARE    l_request_id NUMBER;    l_rphase     VARCHAR2(80);    l_rstatus    VARCHAR2(80);    l_dphase     VARCHAR2(80);    l_dstatus    VARCHAR2(80);    l_message    VARCHAR2(2000);BEGIN    -...
初试jquery制作一个简单的loading
weixin_33749242的博客
09-22 307
很多人都为javascript而感到困惑，写个效果太复杂了，有了jquery后，我们就能够很简单的写一些很漂亮的效果。而这次我要说的不是这个，是jquery对ajax的支持，下面先简单说一下jquery对ajax的一些函数 通用方式： $.ajax(prop) 通过一个ajax请求，回去远程数据，prop是一个hash表，它可以传递的key/value有以下几种。 ...
简单jQuery加载等待转圈页面插件
11-08
简单的jQuery加载等待转圈页面小插件
jquery+CSS3按钮加载loading动画效果
06-12
大家在点击一些按钮的时候，经常出现一些漂亮的按钮loading动画效果，让用户在下载等待的时候不显得乏味，今天就给大家推荐一款CSS3的按钮loading动画效果，需要的童鞋可以试试效果
jquery等待效果示例
10-26
主要介绍了jquery等待效果示例,需要的朋友可以参考下
jQuery简单实现提交数据出现loading进度条的方法
10-22
主要介绍了jQuery简单实现提交数据出现loading进度条的方法,涉及jQuery的ajax调用及页面样式操作技巧,需要的朋友可以参考下
利用JQUERY实现多个AJAX请求等待的实例
10-18
下面小编就为大家分享一篇利用JQUERY实现多个AJAX请求等待的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JQUERY的AJAX请求缓存里的数据问题处理
11-23
参数type由get改成post 添加参数cache并设置成false 添加时间戳 $.ajax({ url: 'ios/index', cache: false, type: 'post', data: { timestamp: new Date().getTime() //params here }, ...
jquery子窗口给父窗口元素赋值和获得值,子窗口调取父窗口方法,父窗口调取子窗口方法
rzrenyu的博客
06-08 1万+
1. 子窗口给父窗口元素赋值 /**  * 修改主题详情  * @param id  */ function modifyTheme(id){ $("#theme_id",window.parent.document).attr("value",id); //子窗口给父窗口元素赋值 } 2. 子窗口获得父窗口的元素值
easyui1.4.1下的表格easyui-datagrid
rzrenyu的博客
07-04 1485
java技术框架springMVC 1.前台jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <table class="easyui-datagrid" id="roleList" title="岗位列表" data-options="singleSelec
jQuery有没有loading效果
最新发布
07-14
是的，jQuery有提供loading效果的插件。其中比较常用的是`jQuery UI`库中的`ProgressBar`组件，它可以显示一个进度条来表示加载状态。你可以通过引入jQuery和jQuery UI库，并使用相关的API来实现loading效果。以下是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值