页面加载时，利用 Vue.js/Nuxt.js 巧妙显示 Loading 动画

2024-02-15 19:41:45

前言

在当今快节奏的网络世界中，用户希望网站加载迅速且响应迅速。如果页面加载时间过长，他们可能会感到沮丧并转而访问其他网站。为了解决这个问题，我们可以使用 Loading 动画来告知用户页面正在加载，让他们耐心等待。

方法一：使用 Vue.js

Vue.js 是一个流行的前端框架，它提供了许多工具和特性来简化 Web 开发。我们可以使用 Vue.js 在页面加载期间动态显示和隐藏 Loading 动画。

创建 Loading 组件

在 Vue.js 组件中，创建一个名为 Loading.vue 的新文件，代码如下：

<template>
  <div v-if="isLoading">
    <div class="loading-container">
      <div class="loading-spinner"></div>
      <p>正在加载中...</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    // 当页面加载完成时隐藏 Loading 动画
    document.addEventListener('DOMContentLoaded', () => {
      this.isLoading = false
    })
  }
}
</script>

<style>
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #fff;
  border-radius: 50%;
  border-top-color: #f00;
  animation: spin 1s infinite linear;
}

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

在 Vue 实例中使用 Loading 组件

在 Vue 实例中，在 mounted() 生命周期钩子中调用 document.addEventListener() 事件监听器来检测页面加载完成。当页面加载完成时，它会将 isLoading 数据属性设置为 false，从而隐藏 Loading 动画。

import Loading from './Loading.vue'

export default {
  components: { Loading },
  mounted() {
    // 当页面加载完成时隐藏 Loading 动画
    document.addEventListener('DOMContentLoaded', () => {
      this.$refs.loading.isLoading = false
    })
  }
}

方法二：使用 Nuxt.js

Nuxt.js 是一个基于 Vue.js 的通用 JavaScript 框架。它提供了一个内置的 Loading 组件，可以轻松地在页面加载期间显示动画。

安装 Nuxt.js Loading 模块
```
npm install --save @nuxtjs/loading
```

在 Nuxt.js 配置文件中启用 Loading 模块

// nuxt.config.js

export default {
  loading: {
    color: '#f00',
    height: '5px'
  }
}

在页面组件中使用 Loading 模块

在 Nuxt.js 页面组件中，可以使用 $loading 属性来控制 Loading 动画。

export default {
  mounted() {
    // 页面加载开始时显示 Loading 动画
    this.$loading.start()

    // 页面加载完成时隐藏 Loading 动画
    document.addEventListener('DOMContentLoaded', () => {
      this.$loading.finish()
    })
  }
}