网页加载缓慢时，两种方法实现loading效果

当页面加载速度很慢的时候，页面就会出现白屏的状况，如果没有使用loading来和用户进行交互，用户并不知道应用到底是出现什么问题（卡死、出错或者在加载）页面加载所需要时间越长，那么可能损失的用户量就会多。

第一种方法，可以在页面中放置一个GIF图片

</div>

当ajax获取数据成功时，在js中控制显示隐藏即可。

第二种方法，在页面中自定义一个loading 的样式（自己项目中为蓝色点点上下翻滚）

/*js中创建loading*/
function fnCreatLoading(){
   var _warp = $('<div class="wrapp_loading"></div>');
   $(_warp).html('<div class="k-line k-line11-1"></div>'
       +'<div class="k-line k-line11-2"></div>'
       +'<div class="k-line k-line11-3"></div>'
       +'<div class="k-line k-line11-4"></div>'
       +'<div class="k-line k-line11-5"></div>');
   $('body').append(_warp);
}

/*******************loading css样式****************/
.wrapp_loading {
position: fixed;
top: 50%;
left: 50%;
height: 100px;
margin: 0 10px 10px 0;
padding: 20px 20px 20px;
border-radius: 5px;
text-align: center;
}
.k-line {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 15px;
background: #01fef9;
/* background-color:#4b9cdb */
}
.k-line11-1 {
animation: k-loadingP 2s infinite;
}
.k-line11-2 {
animation: k-loadingP 2s infinite;
animation-delay: 0.15s;
}
.k-line11-3 {
animation: k-loadingP 2s infinite;
animation-delay: 0.3s;
}
.k-line11-4 {
animation: k-loadingP 2s infinite;
animation-delay: 0.45s;
}
.k-line11-5 {
animation: k-loadingP 2s infinite;
animation-delay: 0.6s;
}
@keyframes k-loadingP {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
/* Safari and Chrome */
-moz-transform: translateY(0);
/* Firefox */
-o-transform: translateY(0);
/* Opera */
}
35% {
transform: translateY(0);
-webkit-transform: translateY(0);
/* Safari and Chrome */
-moz-transform: translateY(0);
/* Firefox */
-o-transform: translateY(0);
/* Opera */
opacity: 0.3;
}
50% {
transform: translateY(-20px);
-webkit-transform: translateY(-20px);
/* Safari and Chrome */
-moz-transform: translateY(-20px);
/* Firefox */
-o-transform: translateY(-20px);
/* Opera */
opacity: 0.8;
}
70% {
transform: translateY(3px);
-webkit-transform: translateY(3px);
/* Safari and Chrome */
-moz-transform: translateY(3px);
/* Firefox */
-o-transform: translateY(3px);
/* Opera */
opacity: 0.8;
}
85% {
transform: translateY(-3px);
-webkit-transform: translateY(-3px);
/* Safari and Chrome */
-moz-transform: translateY(-3px);
/* Firefox */
-o-transform: translateY(-3px);
/* Opera */
}
}

js 页面加载数据时，这样写：

function fnSearch(){
fnCreatLoading();
document.body.style.cursor = "wait";

searchjson.search=$(".iptsearch").val();
$.ajax({
url:'/movecheck/getCheckInfo',
data:searchjson,
type:'post',
success:function(dt){
$('#pagination').attr('data-isall',"");
$(document).find('.wrapp_loading').remove();
if(document.body.style.cursor === "wait"){
document.body.style.cursor = "default";
}
$('.js-rowall').prop('checked',false);
fnCreateTable(dt);
if(dt.data.length == 0){
$('.moveinnerTbody').html('');
var oTr = $('<tr></tr>');
oTr.html(`
<td colspan="7" class="">抱歉，没有查询到数据</td>
`);
$('.moveinnerTbody').append(oTr);
$('#pagination').html('');
}
},
error:function(dt){
createPrompt('error','抱歉，没有查询到数据!',true);
}
})
}

网页加载缓慢时，两种方法实现loading效果

猜你喜欢