网页中的loding效果是先直接显示,然后等js加载完再删除或隐藏这个loding
Css3 实现的动画不需要 js
默认显示loading动画,在ajax获取到数据后隐藏它。
有两类方法:
1 动态方法
1.1 动态添加/删除类名
<p class="box"></p>
.loading{xxxxx}
$.ajax({
url:xxx,
data:xxx,
method:xxx,
dataType:xxx,
beforeSend:function(){
$('.box').addClass('loading');
},
success:function(){
$('.box').removeClass('loading');
}
})
1.2 动态添加/删除标签
$.ajax({
url:xxx,
data:xxx,
method:xxx,
dataType:xxx,
beforeSend:function(){
$('.box').append('<p class="loading"></p>')
},
success:function(){
$('.box').find('.loading').remove();
}
})
静态法
2.1 删除类名
<p class="box loading"><p>
$.ajax({
//....
success:function(){
$('.box').removeClass('.loading');
}
})
2.2 删除标签
<p class="box"><p class="loading"></p></p>
$.ajax({
//...
success:function(){
$('.box').find('.loading').remove();
}
})