让我们制作一个花哨但简单的页面加载器

如今，在网站上看到加载状态非常普遍，尤其是在渐进式 Web 应用和响应式网站兴起的情况下。 这是提高“感知”性能的一种方法——也就是说，让网站感觉加载速度比实际快。

制作加载器的方法有很多——只需在 CodePen 上快速搜索 就可以看到很多示例，从动画 GIF 到复杂的动画。 虽然构建最花哨的加载器很诱人，但实际上我们只需使用最少的 CSS 和 JavaScript 就可以做得非常好。

这是一个我们可以一起制作的示例。

查看 CodePen
带有 JavaScript 淡出效果的加载器，作者为 Maks Akymenko (@maximakymenko)
在 CodePen 上。

SVG 和 CSS 是我们需要的全部内容

我假设您已经创建了一个项目，所以我们将直接跳入并从加载器开始——或者也称为“预加载器”。

SVG 是加载器的绝佳选择。 它可缩放，并且实现起来就像图像标签一样简单。 我们可以从头开始制作一个，例如在 Illustrator、Sketch 或 Figma 等图像编辑器中。 在此示例中，我将从 这里 获取一个来自 loading.io 的 SVG，这是一个制作和自定义不同加载器的不错资源。

现在我们有了 SVG 图形，可以将其放入 HTML 中

<div class="preloader">
  <img src="spinner.svg" alt="spinner">
</div>

我们使用 .preloader 作为包装器，主要是因为它有助于我们在页面上定位图像，但也因为这将有助于我们在加载器工作时隐藏和显示页面内容。

让我们对其进行样式设置

.preloader {
  align-items: center;
  background: rgb(23, 22, 22);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.3s linear;
  width: 100%;
  z-index: 9999;
}

这做了一些不仅仅是装饰的事情

• 我们使用 flexbox 属性和值将加载器直接显示在屏幕中央。
• 我们使元素占据整个屏幕的宽度和高度，并为其设置黑色（实际上是深灰色）背景。 这意味着它后面的任何内容（例如页面内容）都完全隐藏。 如果我们的页面是不同的背景颜色（例如白色），那么我们将相应地调整加载器的背景颜色。
• 位置是固定的，因此滚动不会影响它在页面上的位置。 此外，z-index 足够高，以至于没有其他元素应该堆叠在其顶部并阻止其显示。

这是我们在浏览器中打开它时目前应该看到的内容

一些简单的 JavaScript 处理隐藏

我们有一个花哨的加载器，它覆盖了整个页面，无论我们是在小屏幕还是大屏幕上查看它。 现在我们可以编写一些逻辑，使其在一段时间后淡出。 这需要一小部分 JavaScript。

首先，让我们选择我们刚刚设置样式的 .preloader 元素

const preloader = document.querySelector('.preloader');

实际上，向加载器添加一个类将它的不透明度设置为零会更容易。 但是，它不会像我们这里所做的那样流畅，这里使用了一点 JavaScript 来创建 fadeOut 函数。

const fadeEffect = setInterval(() => {
  // if we don't set opacity 1 in CSS, then
  // it will be equaled to "" -- that's why
  // we check it, and if so, set opacity to 1
  if (!preloader.style.opacity) {
    preloader.style.opacity = 1;
  }
  if (preloader.style.opacity > 0) {
    preloader.style.opacity -= 0.1;
  } else {
    clearInterval(fadeEffect);
  }
}, 100);

💡 jQuery 有一个函数 可以直接做到这一点。 如果您已经在项目中使用 jQuery，请利用它。 否则，使用原生 JavaScript 是可行的。

让我稍微解释一下 JavaScript。 正如注释所说，如果我们的 .preloader 元素没有设置 opacity 属性，则它将为空（""），我们可以将其手动设置为 1，以确保它在文档加载时显示。

一旦我们知道不透明度已设置，我们就可以对其进行操作。 整个函数都包装在 setInterval 中，我们每 100 毫秒检查一次 opacity 属性，以查看它是否大于零。 只要它大于零，我们就将其值以 0.1 的增量递减，这会产生一个随着时间推移逐渐淡出元素的平滑效果。

一旦我们达到零不透明度，我们就 clearInterval 以停止脚本无限运行。 请随意调整时间和递减点以适合您的需求。

最后要做的就是调用函数。 我们将在窗口加载时调用它

window.addEventListener('load', fadeEffect);

我们有意使用 load 事件而不是 DOMContentLoaded，因为 DOMContentLoaded 事件在文档完全加载并解析后触发。 这意味着它 *不会等待样式表、图像和子框架完成加载* *然后再执行*。 load 事件可用于检测页面是否完全加载，这正是我们想要的。 否则，该函数将在我们的 CSS 和 SVG 准备好之前开始。

将一些内容放入 HTML 并尝试一下。 这是演示

查看 CodePen
带有 JavaScript 淡出效果的加载器，作者为 Maks Akymenko (@maximakymenko)
在 CodePen 上。

---

恭喜！ 您现在知道如何仅使用图像以及少量 CSS 和 JavaScript 构建一个非常不错的加载效果。 尽情享受吧！