Why?

Why use loading animation?
我一直觉得良好的过渡和加载动画是 IOS 显著优于其他平台体验的地方,我的 Blog 封面是一张 2K+ 的图片,即使用了 CDN 加速,也会出现明显卡顿,至少对我来说是很影响用户体验的。

Why not use plugins?
Wordpress 上的确有一些优秀的加载页面动画,比如: Loading Page with Loading Screen, Flat Preloader, Page Loading Effects ... 但是自从换了新主题之后,这些插件都没法在我的博客中正常工作,于是我只能手动添加动画。

How

我们回顾一下当你打开一个 wordpress 网站会发生什么。首先会调用 index.php,然后调用 header.php 进行渲染。header.php 中会包含 html 和 js 代码块的混杂,html 又会引用 CSS 样式,最后生成一个页面。我们要做的就是在 header.php 渲染完成之前,用一个铺满屏幕的 html div 元素作为 loading 界面的画板,然后在渲染完成之后,使这个元素消失。

Code

Choose CSS
首先选取一份合适的 CSS 动画,很幸运 Page Loading Effects 在他的 Demo 页面公开了 CSS 源码,你也可以选取你自己喜欢的 CSS

Add Additional CSS
打开 WordPress Appearance -> Customize -> Additional CSS
首先我们要为 loading 界面创造一个画板(z-index要足够大,保证画板在页面最上方):

.loader-background {
`   overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    top: 0;
    pointer-events: none;
    background:white;
}

然后继续添加刚刚选取的 CSS,例如:

.spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;

  -webkit-animation: sk-rotate 2.0s infinite linear;
  animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #EEA2A4;
  border-radius: 100%;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

最后记得点击 Published

Edit header.php
打开 WordPress Appearance -> Theme Editor -> header.php
在 <body> 下面加入

    <!-- Loader animation begin -->
    <div id="pre-loader" class="loader-background">
        <div class="spinner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </div>
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" language="JavaScript">
        //: 判断网页是否加载完成
        document.onreadystatechange = function () {
            if(document.readyState=="complete") {
                $("#pre-loader").fadeOut("slow");
                document.getElementById("pre-loader").remove();
            }
        }
   </script>
    <!-- Loader animation stop -->

其中:
2-7 行表示引入我们刚才添加的 CSS 文件,并给画板取个名字,叫 "pre-loader"
8 行通过百度 CDN 引入 jquery
9-12 行判断网页是否加载完成
13 行通过 jquery 自带函数 fadeOut 实现我们画板 "pre-loader" 的渐隐
14 行删除我们的画板

最后记得点击 Update File 完成更改


Time and Tide wait for no man.