progress.js永远不会达到100％
[英]pace.js never reaches 100%
问题描述
I have added pace.js and pace.css to my site. 
我已经在我的网站上添加了speed.js和progress.css。
As indicate on the pace website, all i need to do is to add .js and .css as early as possible in the header element,so i did: 正如步速网站上所示，我需要做的就是尽早在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" />
The problem is that it never reaches 100%: 问题在于它永远不会达到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>
There is nothing pending in the network tab and no errors in the console. 网络选项卡中没有待处理的内容，控制台中没有错误。
What am i missing here? 我在这里想念什么？
2 个解决方案
解决方案1
2 已采纳 2017-05-10 09:28:47
Here's is the workaround. 这是解决方法。 In this code, I'll check what's the current progress of pace every 100ms. 在这段代码中，我将每100ms检查一下当前的步速进度。 if it's already 99(%), I'll add up a counter (counter++). 如果已经是99％，我将添加一个计数器（counter ++）。 then, everytime it runs this interval, I'll also check if the counter already 50 , which mean, if it's true, then I already check the current progress && it's 99% for 5 seconds (50 x 100ms) and stop the pace. 然后，每次它运行此间隔时，我还将检查计数器是否已经为50，这意味着，如果为真，则我已经检查了当前进度，并且在5秒钟（50 x 100毫秒）内检查了99％并停止了步速。
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();
解决方案2
0 2018-07-14 20:55:31
Just wondering if a better solution had been found, and if not if it would be possible to fire this code for only Safari users using something along the lines of... 只是想知道是否找到了更好的解决方案，如果没有，是否有可能仅使用以下方式针对仅Safari用户触发此代码...
(function ($) {
Drupal.behaviors.pacesafarijs = {
attach: function (context, settings) {
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
jQuery(window).load(function() {
Pace.stop();
});
}
}
}
});
Though I don't know how to properly add that to Yudi's code. 虽然我不知道如何正确地将其添加到Yudi的代码中。
Update : Any idea why the combined code to check whether the browser is safari on mobile, and then finish loading pace if it's struggling, isn't working on https://www.kobejet.com ? 更新 ：知道为什么组合代码无法检查浏览器是否在移动设备上使用safari，然后在遇到困难时完成加载速度，在https://www.kobejet.com上不起作用吗？
(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();
}
}
}
});
It still seems to be stalling at 99% on iPhones even with this code added. 即使添加了此代码，它在iPhone上似乎仍然停滞在99％。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.