Question

我已将pace.js和pace.css添加到我的网站。

如同在pace网站上指出的那样，我需要做的就是尽早在header元素中添加.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>

网络标签中没有任何待处理的内容，控制台中没有错误。

我在这里缺少什么？

Answer 1

这是解决方法。在此代码中，我将检查每100毫秒当前的节奏进度。如果它已经是99（％），我会加一个计数器（计数器++）。然后，每当它运行这个间隔时，我也会检查计数器是否已经50，这意味着，如果它是真的，那么我已经检查了当前的进度＆amp;＆amp;它是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();

Answer 2

只是想知道是否找到了更好的解决方案，如果找不到，是否有可能仅针对使用以下内容的东西的Safari用户触发此代码...

(function ($) {
    Drupal.behaviors.pacesafarijs = {
        attach: function (context, settings) {      
            if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
                jQuery(window).load(function() {
                    Pace.stop();
                });
            }
        }
    }
});

尽管我不知道如何将其正确添加到Yudi的代码中。

更新：知道为什么组合代码无法在https://www.kobejet.com上运行，该代码用于检查浏览器是否在移动设备上是safari，然后在遇到困难时完成加载速度吗？ >

(function ($) {
    Drupal.behaviors.pacesafarijs = {
        attach: function (context, settings) {      
            if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
                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();
            }
        }
    }
});

即使添加了此代码，在iPhone上似乎仍然停滞在99％。

pace.js从未达到100％

2 个答案: