Как мне использовать процент стиля загрузки окна? Процент начинается с 1, а когда 100 - загрузка закончится и моя страница покажет

Question

Я сделал это ... но это не имеет ничего общего с Pageload

Как настроить загрузку страницы связь с ним?

мой js код

setTimeout(function() {
        $('body').addClass('loaded');
    }, 4000);


var $circ = $('.animated-circle');
var $progCount = $('.progress-count');
var percentage=parseInt($('.progress-count').html());



function stopProgress(){
  clearInterval(progress);
}

var progress= setInterval(function(){

  percentage++;
  if (percentage<=100){

    if (percentage>10) {
      var circle_offset = 1.26 * percentage;
        $circ.css({
            "stroke-dashoffset" : 126 - circle_offset
        });
      $('.progress-count').html(percentage+'%');
      console.log(percentage);
    }
  }
  else {
    stopProgress()
  }
},40);

Я устанавливаю постоянные времени загрузки в обратном вызове. Но как установить это время загрузки в Data Load Time?

Answer 1

Используйте Jquery widow.load (), что-то вроде этого

<script>
////start your loader here outside every other method, in the start of your script
</script>

, наконец, выполните следующее

$(window).load(function() {
    stopProgress();
});

window.load будет запускаться еще раз на странице казнены

Answer 2

Посмотрите на фрагмент ниже, если это поможет.

var height = 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({
  height: height + "%"
}, time);

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

.preloader-wrap{position: fixed; top:0; left:0; right:0; bottom:0; background-color: rgba(0, 0, 0, 0.7)}
.loader{ width: 110px; height: 110px; border-radius:50%; background-color: black; position:relative; overflow:hidden; left:0; right:0; top:50%; transform: translateY(-50%); margin:0 auto;}
.trackbar { width: 110px;; height: 110px; margin: 0 auto; background-color: white; padding: 0; position: absolute; border-radius: 50%; left: 0; right: 0; top: 50%; transform:translateY(-50%)}
.loadbar{ position: absolute; bottom: 0; left: 0; right: 0; background-color: skyblue; }
.trackbar:after{content:''; position:absolute; top:50%; left:0; right:0; margin:0 auto; width:90px; height:90px; background-color: black; border-radius: 50%; transform: translateY(-50%);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preloader-wrap">
  <div class="loader">
    <div class="trackbar">
      <div class="loadbar"></div>
    </div>
  </div>
</div>