如何使用 jquery 显示页面加载百分比

如何解决如何使用 jquery 显示页面加载百分比

我想使用 jquery 显示 1%、2%、3% .... 100% 的页面加载。但它只显示 100%;

 var count = 0;

    while(count<100){
        $("#load-perc").text(count+1+"%").delay(200).fadeIn("slow");
        count++;
    }

我也尝试过动画，但没有任何效果。

$("#load-perc").html(count+1+"%").animate({'opacity': 1},400);

你能帮我显示 1%,2%,3% .... 100% 之类的加载吗

解决方法

在 vanilla JS 中：设置一个间隔，您可以通过更改时间来控制速度。时间越长，速度越慢。

在 jQuery 中：使用animate函数制作计数器。

// Vanilla JS
let time = 20
let start = 0
let end = 100
let counter = setInterval(() => {
  if (start != end) {
    document.getElementById('loader').innerHTML = start + '%'
    start += 1
  } else {
    clearInterval(counter)
    document.getElementById('loader').innerHTML='100%'
  }
},time)

// Pure jQuery
$('#jqueryLoader').prop('Counter',0).animate({
  Counter: 100
},{
  duration: 2000,easing: 'swing',step: function(now) {
    $(this).text(Math.ceil(now)+'%');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='loader'></div>
<div id='jqueryLoader'></div>

这是一个不依赖超时的解决方案

它使用 complete 的 fadeIn 回调来解析链接的 promise

创建 fn 以简化操作

var count = 0;
var p = Promise.resolve();
var fn = (perc) => {
  p = p.then(() => new Promise(resolve => $("#load-perc").text(perc + "%").delay(200).fadeIn("slow",resolve)));
};
while (count < 100) {
  fn(count + 1);
  count++;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="load-perc"></div>

虽然有 for 循环，但它更整洁

var p = Promise.resolve();
for (let count = 1; count <= 100; count ++) {
  p = p.then(() => new Promise(resolve => $("#load-perc").text(count + "%").delay(200).fadeIn("slow",resolve)));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="load-perc"></div>