主要目的是 簡化頁面加載多個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);
}
});
效果
出來效果比這個好