配速.js永远不会达到100%

我已经在我的网站上添加了 pace.js 和 pace.css。

正如 pace 网站上所示，我需要做的就是尽早在标题元素中添加.js和.css，所以我做到了：

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta content="" name="description" />
    <meta content="" name="author" />
    <script src="~/Scripts/global/pace.min.js"></script>
    <link href="~/Content/global/pace-theme-flash.css" rel="stylesheet" />

问题是它永远不会达到 100%：

<div class="pace pace-active"><div class="pace-progress" data-progress-text="99%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
  <div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div>

"网络"选项卡中没有任何挂起的内容，控制台中也没有错误。

我在这里错过了什么？

这是解决方法。在此代码中，我将每 100 毫秒检查一次速度的当前进度。如果已经是 99(%(，我将添加一个计数器(计数器++(。然后，每次它运行这个间隔时，我还会检查计数器是否已经 50 ，这意味着，如果它是真的，那么我已经检查了当前的进度 &&&它是 99% 5 秒(50 x 100ms(并停止步伐。

var initDestroyTimeOutPace = function() {
    var counter = 0;
    var refreshIntervalId = setInterval( function(){
        var progress; 
        if( typeof $( '.pace-progress' ).attr( 'data-progress-text' ) !== 'undefined' ) {
            progress = Number( $( '.pace-progress' ).attr( 'data-progress-text' ).replace("%" ,'') );
        }
        if( progress === 99 ) {
            counter++;
        }
        if( counter > 50 ) {
            clearInterval(refreshIntervalId);
            Pace.stop();
        }
    }, 100);
}
initDestroyTimeOutPace();

//仅显示常规和 ajax-y 页面导航的进度，而不是每个请求

data-pace-options='{"eventLag"： false，"restartOnRequestAfter"： false}'

文档：https://codebyzach.github.io/pace/docs/

相关内容

最新更新

热门标签：