js实现页面显示加载进度条效果
程序员文章站
2024-02-06 08:03:22
...
我们上网的时候经常会看到一些平台或者网站顶部在页面加载的时候显示加载的进度条，这样用户可以知道还有多少没有加载完，给用户比较友好的用户体验效果，现在我们就来模拟一下这个效果是如何去实现的。
页面加载一般来说是资源加载的问题，资源主要还是css、js、img、视频等资源，这些资源加载完成后都会触发一个onload事件，这样我们就可以在事件里面做一些事情，主要原理是计算页面资源的总数，然后资源载入的时候通过onload事件去监听看下有多少个资源已经加载完成，然后计算出百分比，从而得出页面顶部的进度条所占比例。这里要注意的是，script和link标签要动态创建，不然你就没法计算出资源总数和监听onload事件。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js页面加载显示进度条效果</title>
</head>
<body>
<div style="position:fixed;left:0;top:0;z-index:999999999999999;width:0%;height:3px;background:#24e1b6;" id="bar"></div>
<img src="./img/1.png" />
<img src="./img/2.png" />
<img src="./img/3.png" />
<img src="./img/4.png" />
<img src="./img/5.png" />
</body>
<script>
(function(){
let count = 0;
let script = ['./js/lottie.js', './js/1.js', './js/2.js', './js/3.js'];
let link = ['./css/1.css', './css/2.css', './css/3.css', './css/4.css', './css/5.css'];
let img = document.querySelectorAll('img');
let num = img.length + script.length + link.length;
for(let i1 = 0, len1 = img.length; i1 < len1; i1++) {
(function(j1){
img[j1].onload = function () {
count++;
console.log('img=' + count);
document.querySelector('#bar').style.width = (count / num) * 100 + '%';
};
})(i1);
}
for(let i2 = 0, len2 = script.length; i2 < len2; i2++) {
(function(j2){
let scriptE = document.createElement('script');
scriptE.src = script[j2];
scriptE.onload = function () {
count++;
console.log('script=' + count);
document.querySelector('#bar').style.width = (count / num) * 100 + '%';
};
document.head.appendChild(scriptE);
})(i2);
}
for(let i3 = 0, len3 = link.length; i3 < len3; i3++) {
(function(j3){
let linkE = document.createElement('link');
linkE.href = link[j3];
linkE.rel = 'stylesheet';
linkE.onload = function () {
count++;
console.log('script=' + count);
document.querySelector('#bar').style.width = (count / num) * 100 + '%';
};
document.head.appendChild(linkE);
})(i3);
}
})();
</script>
</html>