在页面加载前先出现加载loading

您好！要在页面加载前显示加载loading，您可以使用以下方法之一：

1. 使用CSS动画效果：在页面的CSS样式表中添加一个用于显示loading的样式，例如：

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
  z-index: 9999;
}

.loading::before {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #888;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

然后，在页面加载时，使用JavaScript动态地添加和移除这个样式：

// 在页面加载前显示loading
document.addEventListener("DOMContentLoaded", function() {
  var loading = document.createElement("div");
  loading.classList.add("loading");
  document.body.appendChild(loading);
});

// 页面加载完毕后移除loading
window.addEventListener("load", function() {
  var loading = document.querySelector(".loading");
  loading.parentNode.removeChild(loading);
});

2. 使用第三方库或框架：许多前端框架和库都提供了方便的加载loading组件，例如React、Vue.js、Bootstrap等。您可以根据您正在使用的框架或库的文档来查找适合您需求的加载loading组件，并按照相应的使用方法进行配置。

这些方法可以帮助您在页面加载前显示加载loading。希望对您有所帮助！如果您有任何其他问题，请随时提问。