使用javascript加载页面时的进度条(没有JQuery)
使用JavaScript加载页面时的进度条是一种在页面加载过程中显示进度的技术。它可以提供用户友好的交互体验，让用户知道页面加载的进度，并在加载完成后隐藏进度条。
实现这种进度条的方法有很多种，以下是一种基本的实现方式：
- 创建一个HTML元素作为进度条，可以是一个
<div>元素，设置其样式和位置。 - 使用JavaScript监听页面加载事件，例如
window.onload事件或DOMContentLoaded事件。 - 在事件处理函数中，获取页面加载的进度，可以使用
document.readyState属性来判断页面加载状态。 - 根据页面加载的进度，更新进度条的显示，可以通过改变进度条元素的宽度或其他样式属性来实现。
- 当页面加载完成后，隐藏进度条。
以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
#progress-bar {
width: 0%;
height: 5px;
background-color: blue;
position: fixed;
top: 0;
left: 0;
transition: width 0.3s;
}
</style>
</head>
<body>
<div id="progress-bar"></div>
<!-- 页面内容 -->
<script>
var progressBar = document.getElementById('progress-bar');
function updateProgressBar() {
var progress = Math.floor((document.readyState / 4) * 100); // 根据页面加载状态计算进度
progressBar.style.width = progress + '%'; // 更新进度条宽度
}
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
progressBar.style.display = 'none'; // 隐藏进度条
} else {
progressBar.style.display = 'block'; // 显示进度条
updateProgressBar();
}
});
</script>
</body>
</html>这个示例中，我们创建了一个高度为5像素的蓝色进度条，并使用updateProgressBar函数根据页面加载状态更新进度条的宽度。在页面加载完成后，我们隐藏进度条。
这种进度条可以应用于任何需要加载时间较长的页面，例如单页应用程序、图像库、视频网站等。它可以提供实时的加载进度反馈，改善用户体验。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云主页：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
