加载中... Vanilla JavaScript 中的动画

由柏拉图重新发布

关注： 0

介绍

在开发网站和 Web 应用程序时，包括加载动画可以通过传达正在发生的事情来显着改善用户体验。这可以吸引用户并在加载内容时保持他们的注意力，它可以帮助用户了解正在发生的事情，而不是让他们猜测。

在本指南中，我们将了解如何使用 Vanilla JavaScript 创建加载动画。我们将同时使用动画 GIF格式 和 CSS 创建的加载器，并了解如何在两种情况下使用它们：在应用程序/网站启动时加载内容或从外部 API 请求内容。

如何创建加载器

人们可能希望以多种方式显示他们的加载器。出于本指南的目的，我们将构建一个加载器，它将覆盖整个屏幕，然后在页面加载完成后消失。首先，我们需要创建一个占位符 HTML 页面：

<div class="loader-container"> <div class="spinner"></div>
</div> <div class="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with Vanilla JavaScript. </p> <div class="buttons"> <button class="btn"><a href="#">Read Article</a></button> <button class="btn get-quote">Generate Quote</button> </div> <div class="quote-section"> <blockquote class="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> <span class="author">- Rollo May</span> </div>
</div>

为了简单起见，我们只有两个 <div> 块——一个用于加载程序，一个用于网站内容。

如前所述，加载图标可以是 的GIF，一个用 CSS 或其他东西创建的动画图标。要记住的重要一点是，相同的方法适用于我们使用的任何类型的加载图标。

使用 GIF 创建加载器

A 的GIF 是一个无限期播放的动画图标。一次我们创造了我们的 的GIF，我们将样式 loader-container 将容纳它的div。有很多方法来设计它！你可以在这里获得真正的创意。我们只需在页面顶部的图标旁边添加一个黑色背景的图层，以“阻止”加载内容：

.loader-container { width: 100%; height: 100vh; position: fixed; background: #000 url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center no-repeat; z-index: 1;
}

当我们现在加载我们的网页时，我们会看到一个黑色的背景和一个 的GIF 在屏幕中间加载，类似于：

至此，我们已经准备好使用 JavaScript 实现加载了。但是让我们也看看我们如何使用 CSS 创建的动画而不是 的GIF，不需要额外的文件来导入。

使用 CSS 创建加载器

我们将使用 CSS 创建完全相同的图标。请记住，我们创建了一个额外的 div (spinner）在 - 的里面 loader-container div 这就是我们将用来表示图标的内容：

.spinner { width: 64px; height: 64px; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite;
} @keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

上面的代码将帮助我们创建一个 CSS loader-icon，我们现在可以使用 loader-container div 来居中并像之前一样添加黑色背景：

.loader-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; background: #000; z-index: 1;
}

现在我们已经看到了两种可用的动画加载器，让我们使用 JavaScript 来控制这个加载动画何时出现和消失。

请注意： 你可以看看这个直播代码笔演示看看我们实际创建的加载器。

如何使用 JavaScript 实现加载动画

JavaScript 允许我们操纵我们的 HTML 结构并删除或隐藏 loader-container 当前显示的 在前面 网站的内容。有两种主要方法可以实现这一点 - 只是隐藏 loader-container，或完全删除它。

无论您选择哪种方法，第一步都是使用 querySelector() or getElementById() 检索 loader-container 这样我们就可以操纵它：

const loaderContainer = document.querySelector('.loader-container');

其次，我们将使用 eventListener 听一个 load 事件，以便它在发生时调用回调函数 load 事件发生：

window.addEventListener('load', () => { // ...
});

隐藏正在加载...元素

最常见的方法是隐藏 loader-container display: none 以便在内容完全加载时消失。

HTML DOM 允许我们从 JavaScript 更改 HTML 元素的样式，下面的代码表明我们正在设置加载器的容器 display 财产 none 这样它就不会出现一次 load 成功：

window.addEventListener('load', () => { loaderContainer.style.display = 'none';
});

或者，您可以创建一个单独的类 display: none 属性：

.loader-container-hidden { display: none;
}

然后用 classList.add() 将类添加到 loader-container 元件：

window.addEventListener('load', () => { loaderContainer.classList.add('loader-container-hidden');
});

删除正在加载...元素

到目前为止，我们已经看到了一个主要的方法，它可以让我们隐藏我们的 loader-container，表示该元素仍然存在，但被隐藏了。另一种选择是完全删除元素：

window.addEventListener('load', () => { loaderContainer.parentElement.removeChild(loaderContainer);
});

此时，当我们加载我们的页面时，会显示加载动画，直到页面内容完全加载。

从 API 请求外部内容时实现加载动画

从外部 API 获取内容是另一种可能需要包含加载器的情况。这种类型的内容可能需要一些时间来获取和显示，因此最好包含一个加载器。

在我们的例子中，让我们尝试从 报价 API 使用内置的 Fetch API。请注意，我们在本文开头创建的 HTML 有一个 “生成报价” 按钮。我们所要做的就是使用 document.querxySelector() 方法来获取元素并创建一个回调函数来处理 click 用户单击按钮时触发的事件：

const getQuoteBtn = document.querySelector('.get-quote'); getQuoteBtn.addEventListener('click', () => { fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

这将成功地帮助我们在我们的应用程序中获得随机报价，但我们希望有一个 加载动画 以便用户知道我们正在期待内容。为此，我们将创建两种方法，一种用于显示 loader-container 另一个隐藏它：

const displayLoading = () => { loaderContainer.style.display = 'block';
}; const hideLoading = () => { loaderContainer.style.display = 'none';
};

请注意： 我们正在使用 display: none，但我们可以使用前面列出的任何其他方法。

至此，我们终于可以将加载动画加入到回调函数中了。当获取开始时，回调函数将显示加载动画并在接收到数据后将其隐藏：

getQuoteBtn.addEventListener('click', () => { displayLoading(); fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { hideLoading(); const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});