- 盆盆罐罐 - https://penpenguanguan.com -

给 WordPress 添加 Loading 效果

不过我这里讲的是 “伪预载” 效果,真正的 Loading 效果是要通过 JQuery 实现的(俺也不懂 JQuery)。通过一张 Loading 的 gif 图片来实现,仅针对 WordPress。效果见萄葡藤 [3],或者注意我的网站左上角。

方法如下:

  1. 先把 Loading 的 gif 图片放在博客网站的根目录下
  2. 在 header.php 文件的<head></head> 中加入代码:<div id=’loading’><img src="/loading.gif" /></div>
  3. 在 footer.php 文件的</body> 前添加闭合代码:<script>document.write(‘<style>#loading{display:none}<\/style>’);</script>
  4. 根据自己的要求还可以加上 loading 的 CSS 效果

现成的 CSS 效果见这篇文章 [4],自己加到 style.css 文件中即可。

现成的 Loading 图片这里 [5]有,可定制颜色的 Loading 图片这里 [6]有。

参考链接:给 WordPress 添加 Loading 预载 [4]