前端 SPA 应用中实现 Loading 效果的方法
在前端单页面应用（SPA）中，经常使用 Loading 效果来提示用户正在加载数据或等待操作完成。本文将介绍几种实现 Loading 效果的方法，并提供示例代码。
1. 使用 CSS3 动画
CSS3 中提供了丰富的动画效果，我们可以利用 CSS3 动画来实现 Loading 效果。
首先，我们可以在 HTML 文件中添加一个 div，将其作为 Loading 效果的容器，如下所示：
<div class="loading-container"> <div class="loading"></div> </div>
然后，在 CSS 文件中定义 Loading 效果的样式：
-- -------------------- ---- -------
-------- -
--------- ---------
---- ----
----- ----
------ -----
------- -----
----------- ------
------------ ------
------- --- ----- -----
----------------- -----
-------------- ----
---------- ---- -- ------ ---------
-
---------- ---- -
-- -
---------- ---------------
-
-上述代码中，我们使用了 animation 属性来定义动画的名称、时长、时间函数和重复次数，同时使用 keyframes 属性定义了动画的关键帧。
最后，在 JavaScript 中控制 Loading 效果的显示和隐藏：
const loadingContainer = document.querySelector('.loading-container');
// 显示 Loading 效果
loadingContainer.style.display = 'block';
// 隐藏 Loading 效果
loadingContainer.style.display = 'none';2. 使用第三方库
除了手动编写 CSS3 动画之外，我们也可以使用现成的第三方库来实现 Loading 效果，例如 spin.js、loaders.css 等。
以 spin.js 为例，在 HTML 文件中添加一个 div，作为 Loading 效果的容器：
<div class="loading-container"></div>
然后，在 JavaScript 中引入 spin.js，并创建一个 Spinner 对象：
import Spinner from 'spin.js';
const loadingContainer = document.querySelector('.loading-container');
const spinner = new Spinner().spin(loadingContainer);最后，在需要显示 Loading 效果的地方控制 Spinner 对象的显示和隐藏：
// 显示 Loading 效果 spinner.spin(); // 隐藏 Loading 效果 spinner.stop();
3. 使用 Promise 和 async/await
在异步操作中，我们经常需要实现 Loading 效果，可以使用 Promise 和 async/await 来实现。
首先，在 HTML 文件中添加一个 div，作为 Loading 效果的容器：
<div class="loading-container"> <div class="loading"></div> </div>
然后，在 JavaScript 中实现 Loading 效果的逻辑：
-- -------------------- ---- -------
----- ---------------- - ---------------------------------------------
-------- --------------- -
------ --- --------------- -- ------------------- -----------
-
----- -------- ------ -
--- -
------------------------------ - --------
----- ------------
- ----- ------- -
---------------------
- ------- -
----- ------------
------------------------------ - -------
-
-
-------- ----------- -
------ --- --------------- --
------------- -- -
----------------- ----------
----------
-- -----
--
-在上述代码中，我们使用 async/await 关键字来实现异步操作，同时使用 Promise 和 delay 函数来实现 Loading 效果的延迟。
最后，在需要显示 Loading 效果的地方调用 load 函数即可：
load();
4. 使用 Vue.js 中的 v-loading 指令
如果你正在使用 Vue.js，那么可以使用 Vue.js 中自带的 v-loading 指令来实现 Loading 效果。
首先，在 HTML 文件中添加一个 div，作为 Loading 效果的容器：
<div v-loading="isLoading"></div>
然后，在 Vue.js 组件中定义 isLoading 数据：
export default {
data() {
return {
isLoading: false
};
}
}最后，在需要显示 Loading 效果的地方改变 isLoading 数据即可：
this.isLoading = true; // 显示 Loading 效果 this.isLoading = false; // 隐藏 Loading 效果
V-loading 指令的具体实现可参考官方文档。
总结
本文介绍了四种实现 Loading 效果的方法：使用 CSS3 动画、使用第三方库、使用 Promise 和 async/await 以及使用 Vue.js 中的 v-loading 指令。每种方法都有其适用场景和优劣势，我们可以根据实际需求选择合适的方法来实现 Loading 效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f3c7b968c7c53b0da1bf1