jquery 显示加载进度条，直到页面加载

8ehkhllq 于 2023-04-20 发布在 jQuery

关注(0)|答案(1)|浏览(160)

我想显示加载进度条，直到页面加载。如果互联网可能是缓慢的，页面需要更多的加载，进度条显示，直到页面完全加载。
我试图添加代码，但由于互联网速度不同，它是不准确的.你能帮我这个吗？我想添加一个进度条，从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>

jquery

来源：https://stackoverflow.com/questions/73147796/show-loading-progress-bar-till-the-page-load

1条答案

按热度按时间

hgb9j2n61#

听起来像CSS（仅）动画将是一个可以考虑的选择。内联你的进度条，它的<style>作为页面加载的第一件事。然后删除，然后使身体再次可见页面加载事件。如果你使用一些缓动功能，将永远不会完成，你可以欺骗时间。
如果你需要进度条中的数字，那么有一个选项;即使是在现代浏览器中的变量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>

赞(0）回复(0）举报 2023-04-20

我来回答

jquery 显示加载进度条，直到页面加载

1条答案

相关问题

热门标签

最新问答