使用js实现带遮罩的加载动画

好的，下面是一个简单的实现方式：

首先，在 HTML 中创建一个遮罩层和加载动画元素：

<div id="mask"></div>
<div id="loading">
  <img src="loading.gif" alt="loading" />
</div>

然后，定义 CSS 样式：

#mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

#loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  display: none;
}

接下来，使用 JavaScript 在需要加载的时候显示遮罩层和加载动画：

// 显示遮罩层和加载动画
function showLoading() {
  document.getElementById("mask").style.display = "block";
  document.getElementById("loading").style.display = "block";
}

// 隐藏遮罩层和加载动画
function hideLoading() {
  document.getElementById("mask").style.display = "none";
  document.getElementById("loading").style.display = "none";
}

最后，使用 AJAX 或其他方式加载数据时，在开始和结束时调用 `showLoading()` 和 `hideLoading()` 函数即可。

注意，这只是一个简单的实现方式，实际应用中可能需要更多的细节处理。