主要目的是 简化页面加载多个ajax请求始终是一个londong请求 顺便改改londing样式 不喜勿喷face[嘻嘻] 欢迎改进
一直比较喜欢用layer 后面有layerui也挺喜欢 不过作为后端工程师 在这发确实是有点face[嘻嘻] face[嘻嘻] face[嘻嘻]
主要是在ajax请求的时候 加载页面多个选项 londing图标 控制比较麻烦
之前也试过先londing 在ajax request 不过老觉得不叫繁琐 js 写起来挺复杂的 layer table插件又不太符合业务展示 最后自己写一个异步ajax 加载展示
主要个人也不太喜欢 layer的londling样式 索性把element的加载样式扒过来用用 face[嘻嘻] face[嘻嘻]
js代码
var loadindex=0;
var showlond=0;
var londlayer=0;
var layercout=0;
/**
* 有加载提示
*/
var pairequest=function selfRequest(requrl,data){
return new Promise(function(resolve,reject){
if(londlayer==0){
layercout = layer.load(3, {
shade: [0.2,'#fff'], //0.1透明度的白色背景
time:30000
});
$(".layui-layer-loading3").empty();
$(".layui-layer-loading3").append('<div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg></div>')
londlayer=1;
}
loadindex++;
$.ajax({
type : 'POST',
url : requrl,
dataType : "json",
data:data,
success : function(data) {
showlond++;
if(loadindex==showlond){
setTimeout(function(){
if(loadindex==showlond){
londlayer=0;
layer.close(layercout);
}
}, 300);
}
return resolve(data);
},
error:function(e){
showlond++;
if(loadindex==showlond){
setTimeout(function(){
if(loadindex==showlond){
londlayer=0;
layer.close(layercout);
}
}, 300);
}
resolve("")
layer.msg("请求失败",{offset: 't',anim: 6});
}
});
})
}
/**
* 无加载 提示
*/
var painoloadrequest=function selfRequestNoLoad(requrl,data){
return new Promise(function(resolve,reject){
$.ajax({
type : 'POST',
url : requrl,
dataType : "json",
data:data,
success : function(data) {
return resolve(data);
},
error:function(e){
resolve("")
layer.msg("请求失败",{offset: 't',anim: 6});
}
});
})
}
css 样式 我就加到layer.css里面了
[pre]
/* loading */
.circular {
height: 44px;
width: 46px;
animation: loading-rotate 2s linear infinite;
}
.circular .path {
animation: loading-dash 1s infinite;
-moz-animation:loading-dash 1s infinite; Firefox
-webkit-animation:loading-dash 1s infinite; Safari and Chrome
-o-animation:loading-dash 1s infinite; Opera
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 5px;
stroke: #009688;
stroke-linecap: round;
}
.circular .path_sm {
animation: loading-dash 1s infinite;
-moz-animation:loading-dash 1s infinite; Firefox
-webkit-animation:loading-dash 1s infinite; Safari and Chrome
-o-animation:loading-dash 1s infinite; Opera
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 5px;
stroke: #FF5722;
stroke-linecap: round;
}
@keyframes loading-dash
{
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
@-moz-keyframes loading-dash Firefox
{
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
@-webkit-keyframes loading-dash Safari and Chrome
{
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
@-o-keyframes loading-dash Opera
{
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
@keyframes loading-rotate
{
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes loading-rotate Firefox
{
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes loading-rotate Safari and Chrome
{
100% {
transform: rotate(360deg);
}
}
@-o-keyframes loading-rotate Opera
{
100% {
transform: rotate(360deg);
}
}
/* londing */
调用方式
var reqdata={};//参数json
painoloadrequest("",reqdata).then(function(data){
//data返回数据
if(data.success==true){
layer.msg(data.msg);
}else{
layer.msg(data.msg);
}
});
效果
出来效果比这个好