WordPress添加预加载动画(非插件)

首先先回答为什么不使用插件?
其实wordpress提供了许多预加载动画的插件,但是在实际使用时发现偶尔会出现页面部分内容先于加载动画出现,导致观感不好,遂决定采用直接修改主题文件的方式,避免这种情况的发生。


因为我使用了主题,所以这里打开wp-content/themes/argon下的header.php

在body标签后添加以下内容

  <style>
    .loading-animations {
        background: #666;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
        transition: 1s;
        opacity: 1;
    }

    .loading-animations-out {
         opacity: 0;
    }
</style>
<div class="loading-animations" id="loading-warp"></div>
HTML

该css内容是使页面出现一个白色的页面,与以下的js相配合,实现在页面加载完成后淡出。

<script>
 window.addEventListener('load', function () {
        let loader = document.getElementById("loading-warp");
        loader.className = "loading-animations loading-animations-out";
        setTimeout(() => {
            loader.style.display = "none"
        }, 1000);
    });
</script>
HTML

以上,简单的实现了白色的加载动画。但是这样难免过于单调,可以在https://css-loaders.com/挑选自己喜欢的动画,并将css添加在style标签内,将div添加在<div class=”loading-animations” id=”loading”>之中,如本站的加载动画完整代码如下(经过简单的压缩,但本质不变)

<!--加载动画开始-->
<style>
.loading-animations{background:#FFF;position:fixed;left:0;right:0;top:0;bottom:0;z-index:9999;display:flex;align-items:center;justify-content:center;transition:1s;opacity:1}
.loading-animations-out{opacity:0}
.loader{position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:auto;width:175px;height:100px}
.loader span{display:block;width:7px;height:100%;border-radius:14px;margin-right:5px;float:left}
.loader span:last-child{margin-right:0px}
.loader span:nth-child(1){animation:load 2.5s 1.4s infinite linear}
.loader span:nth-child(2){animation:load 2.5s 1.2s infinite linear}
.loader span:nth-child(3){animation:load 2.5s 1s infinite linear}
.loader span:nth-child(4){animation:load 2.5s 0.8s infinite linear}
.loader span:nth-child(5){animation:load 2.5s 0.6s infinite linear}
.loader span:nth-child(6){animation:load 2.5s 0.4s infinite linear}
.loader span:nth-child(7){animation:load 2.5s 0.2s infinite linear}
.loader span:nth-child(8){animation:load 2.5s 0s infinite linear}
.loader span:nth-child(9){animation:load 2.5s 0.2s infinite linear}
.loader span:nth-child(10){animation:load 2.5s 0.4s infinite linear}
.loader span:nth-child(11){animation:load 2.5s 0.6s infinite linear}
.loader span:nth-child(12){animation:load 2.5s 0.8s infinite linear}
.loader span:nth-child(13){animation:load 2.5s 1s infinite linear}
.loader span:nth-child(14){animation:load 2.5s 1.2s infinite linear}
.loader span:nth-child(15){animation:load 2.5s 1.4s infinite linear}
@keyframes load{0%{background:#c8977c;transform:scaleY(0.08)}
50%{background:#e1ae93;transform:scaleY(1)}
100%{background:#c8977c;transform:scaleY(0.08)}
}
</style>
<script>
window.addEventListener('load',function(){let loader=document.getElementById("loading-warp");loader.className="loading-animations loading-animations-out";setTimeout(()=>{loader.style.display="none"},1000)});
</script>
<div class="loading-animations" id="loading-warp">
    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<!--加载动画结束-->
HTML

代码出处:https://www.lovestu.com/loading-animation.html

分享一下

评论

  1. Windows Chrome
    1 月前
    2024-11-05 14:50:13

    能不用插件尽量不用插件 本来wp就很慢 插件阅读越慢

    • 博主
      文案姐笔记
      Windows Chrome
      1 月前
      2024-11-06 11:55:54

      是这样的哈哈,想起来之前一个朋友说的“优化的尽头就是不优化”(*^▽^*)

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇
隐藏
变装