1.HTML结构中引入fontawesome字体用于动画显示(可用其他字体或图片代替)
<link rel="stylesheet" href="./lib/fontawesome/css/font-awesome.css">
2.在该页面中的css样式文件中加入动画样式
.loadding::before {
content: "";
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
opacity: .9;
}
.loadding::after {
content: "\f110";
position: fixed;
z-index: 101;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 100px;
top: 30%;
left: 50%;
margin-left: -50px;
color: #0094ff;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
3.页面初始化时添加类,渲染完成后移除类
// 初始化函数
function init() {
$("body").addClass("loadding");
eventList();
getUrlParam(url,'id');
}
// 判断超链接后面是否存在参数,存在的话,调用渲染页面数据
if(items){
getDetail(items);
setTimeout(function(){
$("body").removeClass("loadding");
},500)
}