如何在页面加载完成之前显示页面加载 div？

在 Web 开发中，有时页面需要加载大量数据或资源，这会导致页面加载速度变慢，给用户带来不良体验。为了改善这种情况，我们可以在页面加载之前，先显示一个页面加载提示框，显式告诉用户页面正在加载中，等页面完全加载完成后再显示页面。下面我们简单介绍一下如何实现这个功能。

1. 使用 CSS3 动画

我们可以利用 CSS3 中的动画特性来实现一个页面加载提示框。这种方法比较简单，只需要将加载提示框的样式设置好即可。

具体实现步骤如下：

1. 在 HTML 中添加加载提示框

<div class="loader">Loading...</div>

2. 在 CSS 中定义加载提示框的样式

.loader {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.7);
}

.loader:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  border: 5px solid #333;
  border-top-color: #ccc;
  animation: spin 1s linear infinite;
}

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

3. 使用 JavaScript 控制加载提示框的显示和隐藏

window.onload = function() {
  var loader = document.querySelector(".loader");
  loader.style.display = "none";
}

// 或者使用 jQuery 
$(window).on("load", function() {
  $(".loader").fadeOut("fast");
});

这里使用了 window.onload 事件和 jQuery 的 load() 事件，当页面加载完成后，控制加载提示框隐藏。

2. 使用第三方库

除了上面介绍的 CSS3 动画外，还可以使用一些第三方库来实现页面加载提示框。下面我们就介绍一下比较常用的几款库。

1. Pace.js

Pace.js 是一款轻量级的页面加载进度条库，无需依赖 jQuery 或其他 JavaScript 库。Pace.js 通过监听 AJAX 请求、页面资源加载以及页面交互等方式，来实时计算页面的加载进度，并将其展示给用户。

使用 Pace.js 很简单，只需要在 HTML 中添加对应的 JavaScript 和 CSS 文件即可。

<!-- JS 和 CSS 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-minimal.css" rel="stylesheet">

2. NProgress.js

NProgress.js 是一个基于 jQuery 的页面加载进度条库，同时支持 AJAX 请求的加载进度。NProgress.js 使用 Ajax 请求时间来模拟进度条加载的速度，让用户感觉更真实。

使用 NProgress.js 也很简单，在 HTML 中添加对应的 JS 和 CSS 文件即可。

<!-- JS 和 CSS 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">

3. Spin.js

Spin.js 是一个纯 JavaScript 实现的加载指示器库，支持所有主流浏览器。Spin.js 生成的内容实际上是一个动画，该动画支持多种预设的样式，也可以自定义样式来实现更好的效果。

使用 Spin.js 也很简单，只需要在 HTML 中添加对应的 JS 和 CSS 文件，然后通过 JavaScript 在需要加载指示器的位置添加相应的 DOM 元素即可。

<!-- JS 和 CSS 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.css" rel="stylesheet">

// 在需要加载指示器的位置添加 DOM 元素
var target = document.getElementById("foo");
var spinner = new Spinner({ lines: 10, width: 4, radius: 10, color: "#333" }).spin(target);

以上就是在页面加载完成之前显示页面加载 div 的方法和相应介绍。可以根据开发需求和具体情况选择适合自己的方法。