Vue项目中使用epic-spinners实现预加载优先展示的方法

核心问题根因 #

当前代码没有对页面内容的渲染时机做状态控制，组件初始化时会把预加载动画、图片、业务组件全部一次性渲染到DOM结构中，自然会同时出现在页面上，无法实现预加载优先展示的效果。

具体调整步骤 #

• 增加内容加载状态的响应式变量，默认值为false，标记页面内容是否准备完成可以展示
• 给预加载动画绑定状态判断逻辑，仅在内容未准备完成时渲染到页面
• 给所有业务内容区域绑定状态判断逻辑，仅在内容准备完成后再渲染
• 在合适的生命周期钩子里设置状态切换的触发条件，满足要求时把状态变量改为true

调整后的完整代码示例 #

<template>
  <div id="app">
    <!-- 预加载层：内容未就绪时展示，可嵌套固定定位样式实现全屏覆盖 -->
    <scaling-squares-spinner
      v-if="!isContentReady"
      :animation-duration="1250"
      :size="65"
      color="#ff1d5e"
    />
    <!-- 业务内容区：内容就绪后展示 -->
    <div v-if="isContentReady">
      <img alt="Vue logo" src="./assets/logo.png" width="25%" />
      <HelloWorld msg="Hello Vue in CodeSandbox!" />
    </div>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
import { ScalingSquaresSpinner } from "epic-spinners";

export default {
  name: "App",
  components: {
    HelloWorld,
    ScalingSquaresSpinner,
  },
  data() {
    return {
      isContentReady: false
    }
  },
  mounted() {
    // 两种常用的状态触发方式，按需选择即可
    // 1. 等待页面所有静态资源（图片、字体、脚本等）全部加载完成后，延迟300ms展示内容，让动画自然收尾
    window.addEventListener('load', () => {
      setTimeout(() => {
        this.isContentReady = true
      }, 300)
    })

    // 2. 固定预加载展示时长，适合纯动画引导场景，比如固定展示2秒后切换
    // setTimeout(() => {
    //   this.isContentReady = true
    // }, 2000)
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

/* 可选：给预加载层加上全屏覆盖样式，避免内容未加载完时露出底层元素 */
.scaling-squares-spinner {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  z-index: 9999;
}
</style>

补充注意事项 #

• 如果使用Vue3组合式API，只需要把状态变量换成const isContentReady = ref(false)，逻辑完全一致即可
• 不要把预加载元素和业务内容放在同一个无判断的DOM节点下，否则会默认同时渲染
• 如果需要自定义预加载的触发逻辑（比如等待接口请求完成、数据初始化结束），只需要在对应逻辑执行完成后修改isContentReady的值即可，不需要改动其他结构

内容的提问来源于stack exchange，提问作者TechDev