Skip to main content

007-网站加载等待动画&页面水印&编辑信息脚注

· 7 min read
tjuzyp

本系列文章适用于前端开发初学者，我将从环境搭建开始，逐步介绍如何开发一个基于 Vue 3.x & Ant Design Vue 4.x 的网站，如果哪位朋友发现其中存在技术错误或其他不当之处，请及时指出，如果有任何疑问或需要帮助，也可以在评论区留言，我将尽我所能一一解答，谢谢。

本篇文章将介绍如何添加网站的加载等待动画、页面水印与编辑信息脚注。

  1. 当网站所在服务器的性能较差、网络带宽较低或其他技术原因导致网站的加载速度变慢时，加载动画能在一定程度上提高用户体验
  2. 页面水印可以在一定程度上增加页面的美观性，然而，过度使用或不当使用水印也可能引起用户的反感，常见的目的是用来保护版权和防止内容被未经授权地复制或分发
  3. 编辑信息脚注标识了内容的最后更新者与更新时间，它的主要作用是提供对页面中内容的补充说明

本篇文章我将结合三国史诗馆网站的页面优化进行介绍，代码实现较简单，主要考验的是审美，一不小心便会画蛇添足。

加载等待动画​

加载等待动画等待的是什么？它常用于等待页面网络请求、处理数据、渲染组件及其他异步操作。

它的作用域包括页面整体等待、页面局部等待及组件自身等待等。

它的实现方式也多种多样，可以使用 setTimeout() 函数延迟加载、使用 jQuery 的 $(document).ready()、使用 window.onload()、使用 css 变换 display 元素、使用 loading 动画……

这次我介绍的是使用 loading 动画实现页面的整体等待，它是最基础最普遍的一种应用场景。

在 Vue 项目中，我们可以看到以下三段与此相关的代码：

  • 页面入口，创建 id="app" 的 div 元素
/public/index.html
...
<body>
    <div id="app" />
</body>
  • 定义应用主程序，使用路由
/src/App.vue
<template>
    <router-view/>
</template>
...
  • 创建并启动应用主程序
/src/main.js
...
// 引入主程序
import App from './App.vue';

// 创建应用
const app = createApp(App);
...
// 启动
app.mount('#app');

在上述代码中，app.mount('#app') 是将 Vue 应用挂载到具有 id 为 "app" 的 <div> 元素上，这意味着当执行该代码时，Vue 应用将替换 <div id="app" /> 元素的内容。

所以，我们可以在 <div id="app" /> 中增加一个动画，就实现了等待时显示、加载后销毁，代码如下：

/public/index.html
...
<link rel="stylesheet" href="/loading.css"/>
...
<div id="app">
    <div class="fantastic-admin-home">
        <div class="loading">
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
        </div>
        <div class="text">服务器性能有限, 请耐心等待</div>
    </div>
</div>
...

以上代码是使用 css 画了一个动画，css 代码如下：

/public/loading.css
#app {
    height: 100%;
}

.fantastic-admin-home {
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    user-select: none;
    color: #736477;
    background-color: snow;
}

.fantastic-admin-home .loading {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.fantastic-admin-home .loading .square {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
}

.fantastic-admin-home .loading .square::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 15%;
    border: 3px solid #8c858f;
    animation: square-to-dot-animation 2s linear infinite;
}

.fantastic-admin-home .loading .square:nth-child(1)::before {
    animation-delay: calc(150ms * 1);
}

.fantastic-admin-home .loading .square:nth-child(2)::before {
    animation-delay: calc(150ms * 2);
}

.fantastic-admin-home .loading .square:nth-child(3)::before {
    animation-delay: calc(150ms * 3);
}

.fantastic-admin-home .loading .square:nth-child(4)::before {
    animation-delay: calc(150ms * 4);
}

@keyframes square-to-dot-animation {
    15%,
    25% {
        border-radius: 100%;
        width: 0;
        height: 0;
        margin: 5px;
        border-width: 5px;
    }

    40% {
        border-radius: 15%;
        width: 10px;
        height: 10px;
        margin: initial;
        border-width: 3px;
    }
}

.fantastic-admin-home .text {
    position: relative;
    font-size: 18px;
    margin-top: 20px;
}

.fantastic-admin-home .text::after {
    content: "....";
    position: absolute;
    padding-left: 1px;
}

效果如下：

加载等待动画

页面水印​

页面水印是指在网页背景上添加的特定的文字/图案，它通常是半透明的形式，或者颜色非常浅，对网页原始内容的可读性不造成影响。

使用 Antdv 框架时，添加水印很容易，它已经帮我们封装好了，只需要在页面元素最外层增加 a-watermark 即可，代码如下：

/src/layout/index.vue
<template>
    <a-watermark :height="30" :width="130" :image="require('@/assets/logo-full-watermark.png')">
        // 原 a-layout 代码段
        ...
    </a-watermark>
</template>
...

效果如下：

页面水印

编辑信息脚注​

编辑信息脚注是我随便起的一个名字，它用于在一段内容的结尾处标记最后编辑信息，实现方式各种各样，我只用了最直接的一行代码，如下所示：

/src/views/record/personage/detail.vue
...
<p class="editInfo">最后由 xxx 编辑于 xxx</p>
...
.editInfo {
    float: right;
    color: lightgrey;
    font-style: italic;
}

效果如下：

编辑信息脚注

总结​

页面设计时尽量少加花里胡哨的东西，它会影响页面要展示的主体内容，也容易引起用户的反感。

本篇文章到这里就结束了，欢迎关注后续更新。