为 WordPress 添加加载动画 懒加载 页面加载动画

感谢@lizhihao6提供的教程,本文有一定删改。

 

前言

本人已经关掉了又拍云的 CDN 加速,就当体验一下吧。小站不需要 CDN,大站需要有钱才挂 CDN。博主在挂 CDN 的过程中真的遇到太多糟心事,网站也因为访问问题被百度K了,现在都搜不到我的主页。唉~

话不多说,进入正题!关掉了 CDN,网站的访问速度必然会受影响,尤其是图片比较多的时候,就一直在加载。其实很多人有个误区是因为过渡动画会导致电脑卡,也许在配置比较低的电脑上是这样,但那样的话就是连过渡动画也是一卡一卡的。实际上,过渡动画是视觉流畅的重要原因。苹果家的电脑手机,看起来很流畅,有一个很重要原因就是动画过渡非常舒服。

试想一下,从一个状态停几秒突然变成另一个状态,必然会觉得卡咯~而这几秒如果变成简单的过渡动画,又有趣,也不会觉得卡顿。

 

为wordpress添加过渡动画

Wordpress 上的确有一些优秀的加载页面动画,比如: Loading Page with Loading Screen, Flat Preloader, Page Loading Effects

我先来说一下这三款插件的体验吧~

Loading Page with Loading Screen

  • 语言:英文
  • 最近更新:2周之前
  • 活跃安装:10,000+
  • 高级功能付费

提供了十种动画预设,也可以自己选择GIF。

虽然是全英文设置,但是我通过翻译软件也搞懂了。这个插件还可以懒加载,不过是高级付费用户了。设置完之后我发现LOGO Screen没有生效,估计是不能兼容吧。Bar Screen 生效了,但是很丑。

 

Flat Preloader

Flat Preloader可帮助您创建带有许多激动gif图标的加载页面。您可以选择显示加载页面的位置,例如主页或所有页面。

Flat Preloader 看名称就知道是扁平化设计。样式很多,设置简单。只要选择加载样式即可,无其他设置。

  • 语言:英文
  • 最近更新: 7月前
  • 活跃安装: 2,000+
  • 完全免费

这个真心不错,简单实用,适合小白。我留着备用了。

 

Page Loading Effects

一个简单轻巧的WP插件,显示加载的动画图形,直到页面完全加载为止。

这个也不错啊,在 GitHub 开源的。这款不是通过图片来加载的,所以理论上来说要比前两款快,你会写 CSS 的话,还可以自定义样式。Page Loading Effects  的作者在他的 Demo 页面公开了 CSS 源码,你也可以参考一下。本文的下方的参数也是参考与它的。

  • 语言:英文
  • 最近更新: 7月前
  • 活跃安装: 5,000+
  • 完全免费

 

Best Preloader

查找过程中我还发现了 Best Preloader

顾名思义,就是要做最好的加载动画

  • 语言:英文
  • 最近更新: 5天前
  • 活跃安装: 800+
  • 完全免费

不过实际上,我在使用中发现加载的时候有问题,我网站都加载完毕了,才出来加载页面真的蠢。不过设置上还是挺方便的,自行体验吧。


 

不采用插件的方法

最后,我还是选择了不使用插件,而采用自定义代码的方式。我相信大部分主题都提供了自定义代码的功能,接下来我们就来看看下面这些代码放在哪里吧~

添加 CSS 样式

.loader-background {
	overflow:hidden;
	position:fixed;
	width:100%;
	height:100%;
	z-index:9999999;
	top:0;
	pointer-events:none;
	background:rgba(255,255,255,0.5);
}
.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:#0da872;
	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);
}
}

把以上CSS样式添加到主题的自定义代码中——

 

针对原来的代码,我改动了背景的透明度为0.5,这样在加载过程中,读者也可以看到原来的内容了。还有原作者写的代码loading不是居中的,我提供的已居中。

 

将加载层添加的<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="http://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 -->

将以上代码添加到自定义头部代码。

 

这部分代码是在主要内容显示之前加载。之所以加载这里,是因为放在<body>最前头,可以在所有内容加载前先加载过渡动画。

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

 

# 协议(License):署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
# 作者(Author):lizhihao6
# 链接(URL):https://lizhihao6.online/wordpress-loading-animation/
# 来源(Source):Inori’s Pikachu

 

Hey,你好哇。
影视剪辑 | AE | Pr | 电脑技术 | 摄影摄像 | 电影 | 电视剧 | 二次元
我们下次见

收集的所有资源均来自网络,仅供私下交流学习之用,任何涉及到商业目的的均不能使用,否则产生的一切后果由您自行承担,提供资源但是不对任何资源负法律责任,所有资源请在你下载后24小时删除。 如有侵权,联系 admin#mail.320nle.com
320印象 » 为 WordPress 添加加载动画 懒加载 页面加载动画

发表评论