处理全页面Loading加载的优雅技巧

2024-02-09 06:38:35

在Web开发中，我们经常需要在用户请求数据时显示Loading加载动画，以提供视觉反馈并提高用户体验。为了使Loading加载过程更加优雅和流畅，我们可以采用一些技巧来控制它的显示和隐藏。

利用JavaScript拦截器

一种常用的方法是使用JavaScript拦截器。拦截器可以在请求发出和响应返回时执行特定的代码，因此我们可以利用它来控制Loading加载动画的显示和隐藏。

例如，在使用Axios库发送请求时，我们可以使用如下代码在请求发出时显示Loading加载动画，并在响应返回时隐藏它：

axios.interceptors.request.use((config) => {
  // 请求发出时显示Loading加载动画
  showLoading();
  return config;
});

axios.interceptors.response.use((response) => {
  // 响应返回时隐藏Loading加载动画
  hideLoading();
  return response;
});

在上面的代码中，showLoading()和hideLoading()是自定义函数，用于分别显示和隐藏Loading加载动画。

使用HTML和CSS

除了使用JavaScript拦截器，我们还可以利用HTML和CSS来控制Loading加载动画的显示和隐藏。

例如，我们可以使用<div>元素来创建Loading加载动画容器，并在需要时将其显示或隐藏。

<div id="loading" class="hidden">
  <!-- Loading加载动画内容 -->
</div>

/* CSS样式 */

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

#loading.hidden {
  display: none;
}