随着 Web 应用程序越来越复杂，人们对页面加载速度的要求也越来越高。 您可能已经看到过许多网站和 Web 应用程序使用加载进度条来告诉用户当前页面的加载状态。在这篇文章中，我们将介绍如何在 ES2021 中实现一个简单的加载进度条。
加载进度条的实现原理
在实现加载进度条之前，让我们先简要地讨论一下它的原理。当用户点击页面上的一个链接或者输入 URL 地址的时候，浏览器会向服务器发送请求，然后会开始下载页面的 HTML、CSS、JavaScript、图片等资源。
在下载这些资源的过程中，浏览器会触发一些事件，比如 readystatechange 和 load。我们可以利用这些事件，来实现一个简单的加载进度条。
加载进度条的实现步骤
下面是实现加载进度条的步骤：
- 创建一个进度条元素。
- 注册
readystatechange事件，在该事件中更新进度条的状态。 - 注册
load事件，在该事件中隐藏进度条并显示页面内容。
示例代码
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Loading Progress Bar</title>
<style>
#progress-bar {
position: fixed;
top: 0px;
left: 0px;
height: 3px;
background-color: #29d;
transition: width 0.3s ease-out;
z-index: 100;
}
</style>
</head>
<body>
<div id="progress-bar"></div>
<h1>Welcome to my website!</h1>
<p>Please wait while the content is being loaded.</p>
<script>
const progressBar = document.getElementById('progress-bar');
function updateProgressBar() {
if (document.readyState === 'loading') {
progressBar.style.width = '10%';
} else if (document.readyState === 'interactive') {
progressBar.style.width = '60%';
} else if (document.readyState === 'complete') {
progressBar.style.width = '100%';
setTimeout(() => {
progressBar.style.display = 'none';
}, 300); // 加上延迟，让用户能够看到进度条完成处理的过程
}
}
document.addEventListener('readystatechange', updateProgressBar);
window.addEventListener('load', () => {
setTimeout(() => {
document.querySelector('h1').textContent = 'Hello, world!';
}, 2000);
});
</script>
</body>
</html>进一步扩展
在上面的示例中，我们只实现了一个简单的加载进度条。但是在实际应用中，我们可能需要更加复杂的场景，比如：
- 针对不同类型的资源（比如 CSS 和 JavaScript）显示不同的进度条。
- 在页面中显示百分比，而不是进度条。
- 支持取消加载、暂停加载等操作。
- 等等。
因此，实现一个功能完善的加载进度条需要考虑许多因素，比如浏览器兼容性、性能和用户体验等问题。在实现过程中，我们应该注意这些问题，并尽可能地做得更好。
总之，在 ES2021 中实现一个简单的加载进度条很容易。我们只需要利用浏览器提供的一些事件，就可以实现一个简单、高效的加载进度条。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfa156e46428fe9eb5131e