显示加载进度条直到页面加载完成

Question

我希望在页面加载时显示加载进度条。如果因为网络速度慢而需要更长时间加载页面，进度条将一直显示到页面完全加载。

我尝试添加代码，但由于网络速度不同，这是不准确的。请帮助我添加一个进度条，在页面加载时从0％开始，并在页面完全加载后上升到100％，具体取决于页面加载速度。

$(window).on('load', function() {
  $('#preloader').fadeOut(500);
  $('body').removeClass('pre_loader');

});
var width = 100,
  perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page.
  EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
  time = parseInt((EstimatedTime / 1000) % 60) * 100;

// Loadbar Animation
$(".loadbar").animate({
  width: width + "%"
}, time);

// Percentage Increment Animation

function animateValue(id, start, end, duration) {
  var range = end - start,
    current = start,
    increment = end > start ? 1 : -1,
    stepTime = Math.abs(Math.floor(duration / range)),
    obj = $(id);

  var timer = setInterval(function() {
    current += increment;
    $(obj).text(current + "%");
    //obj.innerHTML = current;
    if (current == end) {
      clearInterval(timer);
    }
  }, stepTime);
}

// Fading Out Loadbar on Finised
setTimeout(function() {
  $('.preloader-wrap').fadeOut(100);
}, time);

<div class="preloader-wrap">
  <div class="loader">
    <div class="trackbar">
      <div class="loadbar">
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

- Anupam Mistry

---

你可以使用开发工具的网络选项卡来限制互联网速度。 - IT goldman

是的，我知道，但我想在页面加载时显示我的网站标志。在该标志下方放置一个进度条，指示加载百分比。 - Anupam Mistry

Answer 1

听起来像是可以考虑使用CSS（仅限）动画。在页面加载时将进度条内联并将其<style>放在第一位。然后在页面加载事件上移除它们并使body再次可见。如果使用某些永远不会完成的缓动函数，您可以欺骗时间。

如果您需要在进度条中显示数字，则有一个选项；甚至可以在现代浏览器中使用变量：https://css-tricks.com/animating-number-counters/ 例如（需要稍微调整百分比值）：

<!-- almost first thing on page -->
<style>
  .container {
    width: 400px;
    height: 50px;
    position: relative;
    border: 1px solid black;
  }
  
  .progress {
    background: blue;
    float: left;
    color: white;
    width: 100%;
    height: 50px;
    line-height: 50px;
    animation-name: slideInFromLeft;
    animation-duration: 30s;
    animation-timing-function: cubic-bezier(0, .9, .9, .999);
    text-align: center;
  }
  
  .percent::before {
    content: counter(count);
    animation-name: counter;
    animation-duration: 30s;
    animation-timing-function: cubic-bezier(0, .9, .9, .999);
    counter-reset: count 0;
  }
  
  @keyframes slideInFromLeft {
    0% {
      width: 0%;
    }
    99% {
      width: 99%;
    }
  }
  
  @keyframes counter {
    0% {
      counter-increment: count 0;
    }
    10% {
      counter-increment: count 50;
    }
    20% {
      counter-increment: count 60;
    }
    30% {
      counter-increment: count 70;
    }
    40% {
      counter-increment: count 80;
    }
    50% {
      counter-increment: count 90;
    }
    60% {
      counter-increment: count 95;
    }
    70% {
      counter-increment: count 98;
    }
    80% {
      counter-increment: count 99;
    }
    90% {
      counter-increment: count 90;
    }
    100% {
      counter-increment: count 100;
    }
  }
</style>
<div class="container">
  <div class="progress">
    <span class="percent">%</span>
  </div>
</div>

- IT goldman