如何在 HTML 页面中添加预加载器

在网页加载时，通常会出现白屏一段时间，用户会觉得网页加载速度慢，这时可以使用预加载器（Preloader）来提高用户体验。本文将介绍如何在 HTML 页面中添加预加载器。

第一步：创建 CSS 样式

我们先创建一个 CSS 样式来制作预加载器。在 CSS 文件中添加以下代码：

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  z-index: 9999;
}

.preloader .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;
  border: 10px solid #333;
  border-top-color: #ccc;
  border-radius: 100%;
  animation: spin 1s infinite linear;
}

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

这段代码定义了一个名为 preloader 的类，它的位置是固定的，宽度和高度都是 100%，背景颜色是 #f2f2f2。.spinner 类定义了一个圆形的加载器，它位于页面中央。使用了 animation 属性，让加载器旋转。

第二步：在 HTML 页面中添加预加载器

我们需在 HTML 页面中添加一个 div 容器来显示预加载器。在 body 标签下添加以下代码：

<div class="preloader">
  <div class="spinner"></div>
</div>

这段代码创建了一个 div 容器，并添加了 preloader 和 spinner 类，显示预加载器。

第三步：使用 JavaScript 控制预加载器的显示和隐藏

我们需要使用 JavaScript 来控制预加载器的显示和隐藏。在页面加载完之后，隐藏预加载器。在 JavaScript 文件中添加以下代码：

window.addEventListener('load', function(){
  var preloader = document.querySelector('.preloader');
  preloader.classList.add('hide-preloader');
});

这段代码在页面加载完成后，使用 querySelector 方法选择容器。然后，使用 classList 属性中的 add 方法添加了 hide-preloader 类。hide-preloader 类在 CSS 文件中定义了：

.hide-preloader {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
}

这段代码将预加载器的透明度设为 0，设置为不可见，使用了 transition 属性，让隐藏过程更加平滑。

结论

以上就是如何在 HTML 页面中添加预加载器的步骤了。添加预加载器可以提高用户体验，让用户感觉页面加载速度更快。