给 WordPress 添加 Loading 预载

发布于：电脑网络 1,634 次践踏

看到很多网站上都有这么个效果，这个效果可以留住一些心急等不了载入的访客，那到底是怎么实现的呢？之前据我估计这一定是用 JQuery 之类的技术实现的，JS、JQuery 一向是我的软肋，所以没有深究过。今天在逛萄葡藤MM的博客时（一直好奇她的名字为啥不叫葡萄藤，真拗口），意外地发现她的 Loading 预载效果居然只是一张 gif 动画，很好奇，于是就从她的源码里把这个方法扒下来了。

我自己试用了一下这个效果，但是因为小站的速度已经快到胜似光速了，所以每次都是 Loading 图片还在预载，而网站已经完全打开了，不得不放弃这个效果。（兽兽肯定又要跑过来说我自恋了，顺便再BS我一下，我先接受啦，哈哈）总之，Loading 预载的效果可以直接看萄葡藤MM的博客。

下面说我自学来的方法，可能描述地不准确，欢迎指正啊。

1、在 WordPress 的 header.php 中加入 Loading 的 Gif 图片，代码如下：

<div id='loading'><img src="/loading.gif" /></div>

我看萄葡藤MM是把这段加在<head></head>中的，不过根据接下来的第2步，我个人认为还是加在<body>之中比较好，大家各抒己见吧。

2、加好了图片代码，那接下来就是在整站加载完毕后隐藏这张图片啦，萄葡藤MM的做法是在 footer.php 中的</body>闭合前加上以下这段代码：

<script>document.write('<style>#loading{display:none}<\/style>');</script>

这是一段 JS，这么简单的 JS 我还是能够看懂的，意思就是说在加载完<body>中的内容后就将 Loading 的图片隐藏。

3、既然写了 id='loading'，那肯定要写 loading 的 CSS 啦，这样式我也是照搬照抄萄葡藤MM的，如下：

#loading{
    z-index:2;
    padding:5px 5px 5px 5px;
    background:#eee;
    top:30%;left:40%;
    width:120px;
    color:#c44;
    position:fixed;
    font-size: 14px;
    font-weight: bold;
}

这样应该就OK了，我还特地从 ZCOOL 上找了些 Loading 的 Gif 图片供各位参考，点此进入时空门。最后，我还是坚信 Loading 预载入效果可以通过 JQuery 来实现，图片的 Loading 只能算是伪 Loading，JQuery 实现的 Loading 那才是真正意义上的 Loading，改天再好好研究下吧。