选项卡不在焦点时进度条停止
Posted
技术标签:
【中文标题】选项卡不在焦点时进度条停止【英文标题】：Progress Bar stopping when tab is not in focus 【发布时间】：2021-09-05 11:00:11 【问题描述】：我正在使用以下代码作为进度条：
<div class="slide-progress-bar">
<div class="progress-bar" id="progress-bar"></div>
<!--progress-bar-->
</div>
<script>
var elem = document.getElementById("progress-bar");
var width = 1;
function progressBar()
resetProgressBar();
id = setInterval(frame, 300);
function frame()
if (width >= 100)
clearInterval(id);
else
width++;
elem.style.width = width +"%";
function resetProgressBar()
width = 1;
elem.style.width = width;
progressBar()
</script>
<style>
.slide-progress-bar
width: 150px;
background-color:rgba(155, 155, 155, 0.36);
transition: width 10s linear;
display: inline-block;
vertical-align: middle;
margin: auto;
width: 100%;
.progress-bar
height: 5px;
background-color: #ff4546;
position: relative;
transition: linear;
</style>它工作正常（当页面加载时，进度条开始并完成 300 帧）但是当我切换选项卡或最小化窗口时它会停止，当我重新打开选项卡时，它会恢复。我不希望这种情况发生。我希望进度条即使不在焦点上也能继续加载。有没有办法这样做？因为我在其他网站上看到过这样的进度条。
【问题讨论】：
尝试使用 css3 过渡而不是 js 动画。 好吧，我不知道该怎么做。 【参考方案1】：当页面最小化时设置间隔停止。您可以使用 Date 对象来检查自进度条开始加载以来经过了多少时间。
<div class="slide-progress-bar">
<div class="progress-bar" id="progress-bar"></div>
<!--progress-bar-->
</div>
<script>
var animationTimeInMiliseconds = 30000; //30s
var interval = 300;
var elem = document.getElementById("progress-bar");
var beginningDate = new Date().getTime(); // Time in miliseconds
function progressBar()
resetProgressBar();
id = setInterval(frame, interval);
function frame()
var milisecondsFromBegin = new Date().getTime() - beginningDate;
var width = Math.floor(milisecondsFromBegin / animationTimeInMiliseconds * 100);
elem.style.width = width + "%";
if (width >= 100)
clearInterval(id);
function resetProgressBar()
elem.style.width = 0;
progressBar()
</script>
<style>
.slide-progress-bar
width: 150px;
background-color:rgba(155, 155, 155, 0.36);
transition: width 10s linear;
display: inline-block;
vertical-align: middle;
margin: auto;
width: 100%;
.progress-bar
height: 5px;
background-color: #ff4546;
position: relative;
transition: linear;
</style>【讨论】：
谢谢，这就是我要找的那个。【参考方案2】：您可以使用 css3 过渡而不是 js 动画来解决您面临的问题。 你可以阅读更多关于它here 添加示例供您参考。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.slide-progress-bar
width: 150px;
background-color:rgba(155, 155, 155, 0.36);
transition: width 10s linear;
display: inline-block;
vertical-align: middle;
margin: auto;
width: 100%;
.slide-progress-bar .progress-bar
height: 5px;
background-color: #ff4546;
position: relative;
transition: linear;
animation: progres 4s infinite linear;
@keyframes progres
0%
width: 0%;
25%
width: 50%;
50%
width: 75%;
75%
width: 85%;
100%
width: 100%;
;
</style>
</head>
<body>
<div class="slide-progress-bar">
<div class="progress-bar"></div>
</div>
</body>
</html>
【讨论】：
以上是关于选项卡不在焦点时进度条停止的主要内容，如果未能解决你的问题，请参考以下文章
迅雷影音下方的进度条儿任务栏怎么去掉，每次都会点到，而且浮出来以
jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验