下面是“原生JavaScript实现进度条”的完整攻略,包括实现过程、代码示例和具体讲解。
1. 实现过程
1.1 顶部进度条
实现顶部进度条的关键是获取当前页面的加载进度,并将其转化为进度条的宽度并实时更新,下面是代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生JavaScript实现进度条 - 顶部进度条</title>
<style>
.progressbar {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 3px;
background-color: #29d;
transition: width .3s ease;
}
</style>
</head>
<body>
<div class="progressbar"></div>
<script>
window.addEventListener('load', function() {
var progressbar = document.querySelector('.progressbar');
progressbar.style.width = '100%';
setTimeout(function() {
progressbar.style.opacity = '0';
setTimeout(function() {
progressbar.style.display = 'none';
}, 300);
}, 1000);
});
</script>
</body>
</html>
在页面加载完成后,我们使用window.addEventListener('load', callback)
的方式监听页面加载事件。在callback
函数中,首先获取到进度条的DOM元素,然后将其宽度设置为100%,使其充满屏幕。
接下来,我们使用setTimeout
方法给进度条添加一个淡出效果,并在淡出完成后隐藏进度条。
1.2 页面中的进度条
实现页面中的进度条比较麻烦,需要通过监听XHR请求的状态来实现进度条的更新和控制。下面是代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生JavaScript实现进度条 - 页面中的进度条</title>
<style>
.progressbar {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 3px;
background-color: #29d;
transition: width .3s ease;
}
.loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="progressbar"></div>
<div class="loading">加载中...</div>
<script>
var progressbar = document.querySelector('.progressbar');
var loading = document.querySelector('.loading');
var totalTime = 0;
var startTime = 0;
function startLoading() {
loading.style.display = 'block';
startTime = Date.now();
}
function finishLoading() {
loading.style.opacity = '0';
setTimeout(function() {
loading.style.display = 'none';
}, 300);
}
function updateProgress() {
var currentTime = Date.now();
var progress = Math.min((currentTime - startTime) / totalTime, 1);
progressbar.style.width = progress * 100 + '%';
if (progress < 1) {
requestAnimationFrame(updateProgress);
}
}
function hookXHR() {
var open = XMLHttpRequest.prototype.open;
var send = XMLHttpRequest.prototype.send;
var isXHRInitializing = true;
XMLHttpRequest.prototype.open = function() {
this.startTime = Date.now();
open.apply(this, arguments);
}
XMLHttpRequest.prototype.send = function() {
totalTime = this.timeout || 5000;
if (isXHRInitializing) {
isXHRInitializing = false;
hookXHR();
startLoading();
requestAnimationFrame(updateProgress);
}
send.apply(this, arguments);
var self = this;
this.addEventListener('loadend', function() {
finishLoading();
isXHRInitializing = true;
})
}
}
hookXHR();
</script>
</body>
</html>
首先,我们通过XMLHttpRequest
的原型方法open
和send
来监听XHR请求的状态。在open
方法中,我们获取到请求开始的时间戳,并在send
方法中计算请求的总耗时,并将其保存到全局变量totalTime
中。
在第一次XHR请求时,我们开始显示加载中的提示,并使用requestAnimationFrame
方法来不断更新进度条的宽度。在每次更新时,我们计算当前进度的百分比,然后根据百分比设置进度条的宽度。
在XHR请求完成时,我们将加载中的提示淡出,并在淡出完成时隐藏。
2. 总结
通过以上代码示例和实现过程的讲解,我们可以知道实现进度条的关键在于监听XHR请求的状态,并将请求的耗时转化为进度条的宽度并进行实时更新。此外,我们还需要注意淡入淡出效果的实现,以及在进度条更新时如何避免浏览器卡顿的问题。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生JavaScript实现进度条 - Python技术站