pace.js никогда не достигает 100%

Я добавил на сайт сайт pace.js и pace.css.

Как указано на сайте темпа, все, что мне нужно сделать, это добавить.js и.css как можно раньше в элементе header, поэтому я сделал:

<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>

На вкладке сети ничего не ожидает и нет ошибок в консоли.

Что мне здесь не хватает?

Источник

3 ответа

Решение

Вот обходной путь. В этом коде я буду проверять текущий прогресс в темпе каждые 100 мс. если это уже 99(%), я добавлю счетчик (counter++). затем, каждый раз, когда он запускает этот интервал, я также проверяю, равен ли счетчик уже 50, что означает, что если это правда, то я уже проверяю текущий прогресс && это 99% в течение 5 секунд (50 х 100 мс) и останавливаю темп.

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();
Источник

Просто интересно, было ли найдено лучшее решение, и если нет, то можно ли будет запускать этот код только для пользователей Safari, используя что-то вроде...

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

Хотя я не знаю, как правильно добавить это в код Юди.

Обновление: Любая идея, почему объединенный код, чтобы проверить, является ли браузер сафари на мобильных устройствах, а затем завершить загрузку, если он испытывает трудности, не работает на 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();
            }
        }
    }
});

Похоже, что он все еще останавливается на 99% на iPhone даже после добавления этого кода.

Источник

// Показывать прогресс только при обычной и ajax-y навигации по страницам, а не при каждом запросе

data-pace-options = '{"eventLag": false, "restartOnRequestAfter": false}'

Документация: https://codebyzach.github.io/pace/docs/

Источник
Другие вопросы по тегам