SPA 应用中如何加入 Loading 效果？-JavaScript中文网-JavaScript教程资源分享门户

在单页面应用（SPA）中，由于页面只会加载一次，用户在访问过程中会感受到页面加载过慢或没有动态反馈的情况，这极大地影响了用户的体验感。因此，在 SPA 应用中，加入 Loading 效果是一种必要的做法。

本文将介绍 SPA 应用中如何加入 Loading 效果，并提供示例代码以供参考。

方案一：使用插件

在 SPA 应用中，可以使用现成的插件来快速实现 Loading 效果。下面介绍两个比较常用的插件。

NProgress

NProgress 是一款轻量级的进度条插件，它可以自动控制进度条的动态变化。使用 NProgress 可以很方便地为 SPA 应用添加 Loading 效果。

使用步骤

安装 NProgress：
```
npm install nprogress --save
```

在 SPA 应用的入口页面中引入 NProgress：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

在 SPA 应用的路由配置文件中添加路由拦截器：

router.beforeEach((to, from, next) => {
  NProgress.start() // 进度条开始
  next()
})

router.afterEach(() => {
  NProgress.done() // 进度条结束
})

NProgress 的使用非常简单，只要引入插件并添加路由拦截器即可。

vue-loading-overlay

vue-loading-overlay 是一款基于 Vue.js 2 的 Loading 组件。它有着多种样式和配置选项，可以灵活地为 SPA 应用添加 Loading 效果。

使用步骤

安装 vue-loading-overlay：
```
npm install vue-loading-overlay --save
```

在 SPA 应用的入口文件中引入 vue-loading-overlay：

import VueLoading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'
Vue.use(VueLoading)

在 SPA 应用中的组件中使用 vue-loading-overlay：

// www.javascriptcn.com code example
<template>
  <div>
    <!-- 中间内容 -->
    <vue-loading
      :active="loading"
      :can-cancel="false"
      :color="'#4DBA87'"
      :loader="'dots'"
      :is-full-page="true"
    ></vue-loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    fetchData() {
      this.loading = true // 开始加载
      // 加载数据，结束后设置 loading 为 false
      // ...
      this.loading = false // 结束加载
    },
  },
}
</script>

vue-loading-overlay 的使用相对 NProgress 来说稍微繁琐一些，但是它提供了更多的样式和配置选项，可以满足更多的 Loading 效果需求。

方案二：手动实现

如果 SPA 应用中已经存在了自定义的 Loading 样式，或者需要更加精细的控制 Loading，那么可以手动实现 Loading 效果。

下面是一种实现方式，我们将使用 Vue.js 来演示。

在 SPA 应用的入口文件中添加全局变量：

// www.javascriptcn.com code example
import Vue from 'vue'
Vue.prototype.$loading = {
  show() {
    document.getElementById('loading').style.display = 'block'
  },
  hide() {
    document.getElementById('loading').style.display = 'none'
  },
}

在 SPA 应用的 index.html 文件中添加 Loading 样式：

// www.javascriptcn.com code example
<style>
#loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  display: none;
}

.loading-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px solid #eee;
  border-top-color: #333;
  animation: loading 1s infinite ease-in-out;
}

@keyframes loading {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

<div id="loading">
  <div class="loading-spinner"></div>
</div>

在 SPA 应用中的组件中使用 Loading：

// www.javascriptcn.com code example
export default {
  methods: {
    fetchData() {
      this.$loading.show() // 显示 Loading
      // 加载数据，结束后隐藏 Loading
      // ...
      this.$loading.hide() // 隐藏 Loading
    },
  },
}

这种手动实现的方式可以灵活地控制 Loading 效果，但是需要开发者自行实现所有细节。

结语

在 SPA 应用中，加入 Loading 效果是一种必要的做法。本文介绍了两种常用的实现方式，并提供了详细的代码示例，希望能够帮助开发者快速为 SPA 应用添加 Loading 效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c30519314edc2684cb4d40

SPA 应用中如何加入 Loading 效果？

方案一：使用插件

NProgress

使用步骤

vue-loading-overlay

使用步骤

方案二：手动实现

结语

接着读