Fluid -41- 添加博客加载页面

为为为什么

发布于 2024-02-03 12:44:46

1420

发布于 2024-02-03 12:44:46

文章被收录于专栏：又见苍岚又见苍岚

简介

加载动画可以缓解用户等待页面加载的不适感，给予用户一个明确的指示，告诉他们页面正在加载中。这有助于提升用户体验，减轻用户的焦虑感，让他们感觉页面加载速度更快。

实现思路

html + css 创建动画页面
调用 js 加载 dom 事件来控制加载动画消失

实现方法

动画照搬了一个示例 ~

动画页面

我在 bodyBegin 注入了元素代码：

<div id="Loadanimation" style="z-index:999999;">
<div id="Loadanimation-center">
   <div id="Loadanimation-center-absolute">
       <div class="xccx_object" id="xccx_four"></div>
       <div class="xccx_object" id="xccx_three"></div>
       <div class="xccx_object" id="xccx_two"></div>
       <div class="xccx_object" id="xccx_one"></div>
   </div>
</div>
</div>

动画 CSS

css 代码：

#Loadanimation{
   background-color:#fff;
   height:100%;
   width:100%;
   position:fixed;
   z-index:1;
   margin-top:0px;top:0px;
   
}
#Loadanimation-center{
   width:100%;
   height:100%;
   position:relative;
   
}
#Loadanimation-center-absolute{
   position:absolute;
   left:50%;
   top:50%;
   height:200px;
   width:200px;
   margin-top:-100px;
   margin-left:-100px;
   
}
.xccx_object{
   -moz-border-radius:50% 50% 50% 50%;
   -webkit-border-radius:50% 50% 50% 50%;
   border-radius:50% 50% 50% 50%;
   position:absolute;
   border-left:5px solid #87CEFA;
   border-right:5px solid #FFC0CB;
   border-top:5px solid transparent;
   border-bottom:5px solid transparent;
   -webkit-animation:animate 2.5s infinite;
   animation:animate 2.5s infinite;
   
}
#xccx_one{
   left:75px;
   top:75px;
   width:50px;
   height:50px;
   
}
#xccx_two{
   left:65px;
   top:65px;
   width:70px;
   height:70px;
   -webkit-animation-delay:0.1s;
   animation-delay:0.1s;
   
}
#xccx_three{
   left:55px;
   top:55px;
   width:90px;
   height:90px;
   -webkit-animation-delay:0.2s;animation-delay:0.2s;
   
}
#xccx_four{
   left:45px;
   top:45px;
   width:110px;
   height:110px;
   -webkit-animation-delay:0.3s;
   animation-delay:0.3s;
   
}
@-webkit-keyframes animate{50%{
   -ms-transform:rotate(180deg);
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg);
   
}
100%{-ms-transform:rotate(0deg);
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg);
   
}
   
}
@keyframes animate{50%{
   -ms-transform:rotate(180deg);
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg);
   
}
100%{
   -ms-transform:rotate(0deg);
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg);
   
}
}

js 代码

在 js 中添加加载事件（此处用了 jquery）

$(function(){
   $("#Loadanimation").fadeOut(500);
});

这样就可以了 ~

优化方向

单次显示

看了几位大佬的博客，加载页面仅显示一次，虽然我们博客加载方式不同，可以尝试自己实现，已知的思路是检测用户是否从本站跳转而来：在的网页加载时，通过JavaScript检测document.referrer属性，这个属性包含了前一个文档的 URL，如果document.referrer为空或者不是你的网站的URL，那么用户可能是从其他网站跳转而来。