Блог

Главная - Вопросы по программированию - Индикатор выполнения останавливается, когда вкладка не в фокусе

Индикатор выполнения останавливается, когда вкладка не в фокусе

#javascript #html #css #progress-bar #blogger

Вопрос:

Я использую следующий код для индикатора выполнения:

 <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 кадров), но когда я переключаю вкладку или сворачиваю окно, оно останавливается, а когда я снова открываю вкладку, оно возобновляется. Я не хочу, чтобы это случилось. Я хочу, чтобы индикатор выполнения продолжал загружаться, даже если он не в фокусе. Есть ли способ сделать это ?, потому что я видел такие индикаторы прогресса на других сайтах в мае.

Комментарии:

1. попробуйте использовать переходы css3 вместо анимации js.

2. ну, я не знаю, как это сделать.

Ответ №1:

Заданный интервал останавливается, когда страница сворачивается. Вы можете использовать объект даты, чтобы проверить, сколько времени прошло с момента начала загрузки индикатора выполнения.

 <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>

Комментарии:

1. Спасибо, чувак, это тот, кого я искал.

Ответ №2:

Вы можете использовать переходы css3 вместо анимации js для решения проблем, с которыми вы сталкиваетесь. Вы можете прочитать больше об этом здесь, добавив пример для справки.

 <!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>
Метки: ,