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

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

本文共3362个字,预计阅读时间需要9分钟。


感谢@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。

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

虽然是全英文设置,但是我通过翻译软件也搞懂了。这个插件还可以懒加载,不过是高级付费用户了。设置完之后我发现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样式添加到主题的自定义代码中——

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

 

针对原来的代码,我改动了背景的透明度为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 -->

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

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

 

这部分代码是在主要内容显示之前加载。之所以加载这里,是因为放在<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 | 电脑技术 | 摄影摄像 | 电影 | 电视剧 | 二次元
我们下次见

本文最后更新于2019年10月7日,已超过 2 个月没更新!

本文首发于320印象,欢迎转载,但是必须保留本文的署名320印象(包含链接)。如您有任何商业合作或者授权方面的协商,请给我留言:admin@mail.320nle.com作者:静海流沙, 转载或复制请以 超链接形式 并注明出处 320印象
原文地址:《为 WordPress 添加加载动画 懒加载 页面加载动画》 发布于2019-10-07

分享到:
赞(0) 打赏
您阅读这篇文章共花了: 0小时00分00秒

评论 抢沙发

6 + 8 =


请作者喝杯饮料吧~

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
正在获取,请稍候...
00:00/00:00

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录