资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

网页加载动画：让你的网站不再“卡壳”

创作时间:

作者:

@小白创作中心

网页加载动画：让你的网站不再“卡壳”

引用

CSDN

等

来源

https://blog.csdn.net/weixin_65793170/article/details/137665599

https://blog.csdn.net/qq_42177730/article/details/81199103

https://blog.csdn.net/gitblog_00047/article/details/138994151

https://blog.csdn.net/Y7998/article/details/137764419

https://blog.csdn.net/lgno2/article/details/139016941

https://blog.csdn.net/m0_67156290/article/details/136356936

https://my.oschina.net/emacs_8696179/blog/17030999

https://www.cnblogs.com/wt7018/p/18664573

https://repo.ooo/2024-03/hexo-lazyload-animation/

10.

https://developer.aliyun.com/article/1499153

11.

https://www.cnblogs.com/inslog/p/18048711

在现代Web开发中，用户体验是衡量一个网站成功与否的关键因素。而加载动画作为用户在等待页面加载过程中的视觉反馈，可以有效提升用户体验。一个设计精良的加载动画不仅能缓解用户的等待焦虑，还能展现网站的专业性和流畅度。

基础实现方法

HTML + CSS + JS 实现

最基础的加载动画可以通过HTML、CSS和JavaScript来实现。在页面的<body>标签中添加一个加载动画元素，并用CSS设置其样式。当页面加载完成后，通过JavaScript隐藏该元素。

HTML:

<body>
    <div id="loading">
        <h1>加载中......</h1>
    </div>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>

CSS:

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

JavaScript:

window.addEventListener('load', () => {
    document.getElementById('loading').style.display = 'none';
});

Vue3 的 Suspense 组件

在Vue3中，可以使用<Suspense>组件来处理异步组件加载时的过渡效果。

模板部分:

<template>
    <Suspense>
        <template #default>
            <router-view />
        </template>
        <template #fallback>
            <h1>加载中......</h1>
        </template>
    </Suspense>
</template>

异步组件示例:

<template>
    <Suspense>
        <template #default>
            <AsyncComp v-if="visible" />
        </template>
        <template #fallback>
            <h1>加载中......</h1>
        </template>
    </Suspense>
    <button @click="toggle">切换</button>
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue';
const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'));
const visible = ref(false);
function toggle() {
    visible.value = !visible.value;
}
</script>

React 的第三方库 react-loading

React开发者可以使用react-loading这个轻量级的加载动画库。它提供了多种SVG动画效果，可以轻松地在项目中实现各种加载和过渡效果。

安装：

npm install react-loading

使用：

import Loading from 'react-loading';

function App() {
  return (
    <div>
      <Loading type="bars" color="#000" />
    </div>
  );
}

自定义 CSS 动画

你还可以根据需求自定义更复杂的加载动画，例如使用CSS动画或GIF图片等。

CSS 动画示例：

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #000;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

性能优化策略

虽然加载动画可以提升用户体验，但不当的实现可能会对页面性能产生负面影响。以下是一些优化前端加载动画性能的策略：

避免过多的DOM操作：加载动画中频繁的DOM操作会导致浏览器的重绘和回流，降低页面性能。
优化图片资源：
- 使用适当的图片格式（如WebP）
- 压缩图片以减少传输大小
- 采用延迟加载策略
- 使用CDN加速图片加载
使用CSS3和SVG动画：
- 利用硬件加速，减少浏览器重绘和回流
- 尽量使用transform和opacity属性进行动画
- 避免使用会引起重排和重绘的属性
优化JavaScript动画：
- 使用requestAnimationFrame进行动画更新
- 避免在动画过程中进行DOM操作
- 使用will-change属性告知浏览器可能变化的属性