自定义ajax,添加loading效果
自定义ajax
/**
* @desc 自定义ajax请求,添加等待gif
*/
var n=0;
$.defineAjax=function(obj){
n++;
if(!$('#loadingDiv')[0]){
var str='<div id="loadingDiv"><img class="loadingImg" src="'+path+'/ui/common/img/loading.gif"></div>';
$('body')[0].appendChild($(str)[0]);
}
if(typeof obj.success == 'function'){
var fun=obj.success;
obj.success=function(res){
if($('#loadingDiv')[0]){
$('#loadingDiv').remove();
}
fun(res);
}
}
var opt={
type:'post',
data:{},
dataType:'json',
beforeSend:function(xhr){},
complete:function(xhr,status){
if(--n<=0){
$('#loadingDiv').remove();
}
}
},option={};
if(obj.beforeSend===undefined&&obj.complete===undefined){
option=$.extend({},opt,obj);
}
setTimeout(function(){
$.ajax(option);
},200)
}
关键能耗指标分析
js:
option为ajax里面的参数
$.pageAjax=function(option){
if(!$('div.page-loading')[0]){
$('body').append('<div class="page-loading" style="display:none;"></div>');
}
$('div.page-loading').fadeIn(100);
var op={
type:"post",
DataType:'json'
},fn={
success:function(res,mes){
$('body').find('div.page-loading').fadeOut(100);
if(typeof option.success==='function'){
option.success(res,mes);
}
},
error:function(XHRObj,err,ext){
$('body').find('div.page-loading').fadeOut(100);;
if(typeof option.error==='function'){
option.error(XHRObj,err,ext);
}
}
}
var opt=$.extend({},op,option,fn);
$.ajax(opt);
}
css
div.page-loading{
position: absolute;
top:;bottom:;
left:;right:;
background: url('../img/page_loading.gif') no-repeat center center;
margin:auto;
width:65px;
height:65px;
border-radius: 50%;
}
调用:
$.pageAjax(opt.ajax);
效果:
这种正常来说是ok的,单个请求的时候是不会有问题,但是如果有多个请求在发生,并且之前的请求还没有完成的时候,又进行下一个请求,这样就会存在问题
修改:在每次请求之前记录请求的次数,请求之前加1,请求之后不管成功或者失败都减1,如果为0或者小于0,那么就隐藏loading
js
/*
*ajax loading包装插件
*/
$.pageAjax=function(option){
var op={
type:"post",
DataType:'json'
},fn={
beforeSend:function(){
var el=$('div.page-loading');
if(!el[0]){
$('body').append('<div class="page-loading" data-times="1" style="display:block;"></div>');
}else{
showOrHide(el,'+');
}
//每次只有要请求都要显示
el.fadeIn(100);
},
success:function(res,mes){
showOrHide($('body').find('div.page-loading'),'-');
if(typeof option.success==='function'){
option.success(res,mes);
}
},
error:function(XHRObj,err,ext){
showOrHide($('body').find('div.page-loading'),'-');
if(typeof option.error==='function'){
option.error(XHRObj,err,ext);
}
}
}
var opt=$.extend({},op,option,fn);
$.ajax(opt);
}
function showOrHide(el,p){
var num=el.attr('data-times');
if(isNaN(num)){num=0;}
if(p=='+'){
el.attr('data-times',++num);//注意此处是++num ++i和i++的区别借鉴for循环的例子
}else if(p=='-'){
el.attr('data-times',--num);
if(num<=0){
el.fadeOut(100);
}
}
}
还有一种,直接方式,页面查询数据的时候调用显示的方法,成功或者失败的时候调用隐藏的方法
调用显示:
$("#searchbtn").off("click").on("click","",function(){
$.fn.showorhideLoading.show();
getChecknode();
})
调用隐藏
function postAjaxData(param){
//请求
$.ajax({
url:'/findEnergyDayTypeDataList',
data:param,
dataType:'json',
success:function(data){
$.fn.showorhideLoading.hide();//隐藏loading
//处理数据
var dataObj=initData(data.detail);
},
error:function(){
$.fn.showorhideLoading.hide();//隐藏loading
}
})
}
html
<div class="loading" style="display: none;"><img src="/static/ui/modules/systemMan/demo/img/loading.gif" alt=""></div>
css
/*loading效果*/
.loading{
position:fixed;
top:;
left:;
right:;
bottom:;
width:100%;
height:100%;
background-color: rgba(0,0,0,.5);
z-index:;
}
.loading>img{
position:absolute;
width:40px;
height:40px;
top:;
left:;
right:;
bottom:;
margin:auto;
}
/**
* 控制dialog的显示和隐藏
*/
$.fn.showorhideLoading={
show:function(id){
if(id===undefined){
id="body";
}
//判断是否存在loading
var el=$(id).find(".loading");
if(!el[0]){
$(id).append(
'<div class="loading" style="display: block;">'+
'<img src="/static/ui/modules/systemMan/demo/img/loading.gif" alt="">'+
'</div>'
);
}
el.show()
},
hide:function(id){
if(id===undefined){
id="body";
}
//判断是否存在loading
var el=$(id).find(".loading");
if(el){el.hide()}
}
}
自定义ajax,添加loading效果的更多相关文章
- Vue通过状态为页面切换添加loading、为ajax加载添加loading
以下方法需要引入vuex,另使用了vux的UI框架,ajax添加loading还引入了axios. 一.为页面切换添加loading. loading.js: import Vue from 'vue ...
- DataGrid点击上下一页loading效果
js添加显示loading和取消loading方法 function showtbloading() { var target = $("#GridView1"); if (tar ...
- vue中iframe加载慢,给它加loading效果
js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> < ...
- vue实现ajax滚动下拉加载,同时具有loading效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 自定义loading效果
结合Font Awesome字体图标自定义loading效果 Font Awesome字体图标地址:http://www.fontawesome.com.cn/faicons/ 使用javascrip ...
- Android动画效果之自定义ViewGroup添加布局动画
前言: 前面几篇文章介绍了补间动画.逐帧动画.属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢?今天结合自定义ViewGroup来学习一下布局动画.本文将通 ...
- php+ajax实现登录按钮加载loading效果
php+ajax实现登录按钮加载loading效果,一个提高用户体验,二个避免重复提交表单,ajax判断加载是否完成. 登录表单 <form onsubmit="return chec ...
- JQuery+CSS3实现Ajax加载时loading效果
之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...
- ajax加载菊花loading效果
Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...
随机推荐
- laravel中使用mgirations创建和迁移数据库
使用php artisan make:migration create_links_table命令 编辑2016_04_11_095342_create_links_table public func ...
- 文件查找记录类型 - TSearchRec - 文件操作(二)
SysUtils单元下的TSearchRec是一个记录类型,主要通过FindFirst, FindNext, and FindClose使用. 接上一篇举例说明TSearchRec常用成员 //sys ...
- 数独高阶技巧之八——SDC
在本系列的第四篇“简单异数链”中,向大家介绍了XY-Wing等一系列Wing类技巧,并提到可以用(拐弯的)数组的观念来理解这些结构,经过第六篇ALS的学习之后,大家回过头再去看Wing,应该可以发现相 ...
- CentOS6.5安装mysql-5.7.18-1.el6.x86_64.rpm-bundle.tar
本文内容为转载内容,具体作者忘记是谁了,在收藏夹找到的 先去官网(https://dev.mysql.com/downloads/mysql/),在Select Operating System选择R ...
- Word页面去除下划线(Office 2017)实现
后面就不用说了吧设置边框无
- 引用HM.Util.Ioc 的时候报错
引用HM.Util.Ioc 的时候报错 错误:The type name or alias SqlServer could not be resolved. Please check your con ...
- Webserver asp配置及伪静态设置
Webserver IIS asp配置及伪静态设置 一.概述: 在Windows Server 2003系统中,用户可以借助IIS 6.0配置基于ASP.PHP.asp.NET等语言的动态Web网站 ...
- [转载] Linux 下产生和调试core文件
原地址:http://blog.csdn.net/shaovey/article/details/2744487 linux下如何产生core,调试core 在程序不寻常退出时,内核会在当前工作目录下 ...
- ocp最新考试题库:052新考题及答案整理-36
36.Which two are true about roles? A) A role can be granted a combination of system and object privi ...
- OCP 052最新题库还有答案收集整理-第26题
26.In which state can you back up a database in ARCHIVELOGMODE using RMAN? A. NOMOUNT, MOUNT, AND OP ...