Question

我正在尝试添加进度条（类似于progress.js进度条）。问题是刷新浏览器时，pace.js progressbar是loading on the top of body, not on the top of div。加载程序不应在刷新浏览器时加载，而应单击按钮并在顶部的div内加载。

目标是实现类似loader-当我们登录Google时；顶部有一个进度条。我正在尝试实现类似的功能。

我尝试使用pace.js。但是，如果可以使用其他一些更具可配置性和灵活性的库，则欢迎使用它来解决问题。

function createDiv(event) {
  event.target.disabled = true;
  var html = '';
  html += '<div id="paceProgressBarBox" style="background:#ccc;width:200px;height:200px;"></div>';
  $('#myDiv').append(html)
  // add pace progress bar at the top of id="paceProgressBarBox"  and stop pace progress bar loading on browser referesh // instead show pace progress bar on click of button
  var pace;
  pace.options.target = '#paceProgressBarBox';
  pace.start();
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {}

.pace .pace-progress {
  background: #2299dd;
  position: relative;
  z-index: 2000;
  right: 100%;
  width: 100%;
  height: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js">
</script>
<br/>
<button onclick="createDiv(event)">Change Content</button>
<div id="myDiv" style="width:200px;height:200px;"></div>

Answer 1

<body>元素被硬编码到progress.js中，作为进度条所连接的元素。
但是，您可以使用target设置（似乎没有出现在documentation中）覆盖它。

有两种设置target的方法：

在加载速度脚本之前配置paceOptions变量：

paceOptions = {
  target: '#myDiv'
}

工作示例：

    #myDiv {
      width: 200px;
      height: 200px;
    }

    .pace .pace-progress {
      position: relative;
      background: #2299dd;
      z-index: 2000;
      right: 100%;
      width: 100%;
      height: 5px;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <script>
      paceOptions = {
        target: '#myDiv'
      }
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js">
    </script>

    <button>Change Content</button>
    <div id="myDiv"></div>

在其<script>标签中配置进度栏：

<script src=".../pace.js" data-pace-options='{ "target": "#myDiv" }'></script>

工作示例：

    #myDiv {
      width: 200px;
      height: 200px;
    }

    .pace .pace-progress {
      position: relative;
      background: #2299dd;
      z-index: 2000;
      right: 100%;
      width: 100%;
      height: 5px;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js" data-pace-options='{ "target": "#myDiv" }'>
    </script>

    <button>Change Content</button>
    <div id="myDiv"></div>

有关参考，请参见：
Pace Configuration
Specify Location of Indicator

编辑：

要防止Pace在页面加载时自动启动，请将startOnPageLoad设置为false：

jQuery('#changeContent').on('click', createDiv);

#myDiv {
  width: 200px;
  height: 200px;
}

.pace .pace-progress {
  position: relative;
  background: #2299dd;
  z-index: 2000;
  right: 100%;
  width: 100%;
  height: 5px;
}

#paceProgressBarBox {
  background: #ccc;
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script>
  var paceOptions = {
    'startOnPageLoad': false,
    'target': '#paceProgressBarBox'
  }

  function createDiv(event) {
    event.target.disabled = true;
    var $progBarBox = $('<div>', {
      'id': 'paceProgressBarBox'
    });
    $('#myDiv').append($progBarBox);
    Pace.start();
  }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js">
</script>

<button id="changeContent">Change Content</button>
<div id="myDiv"></div>

另请参阅：
Pace's source code以获得完整的选项列表
How to stop pace js plugin to run on page load

使用javascript / jquery

1 个答案:

编辑：