Turbolinks 5：显示进度条

Question

当调用Turbolinks.visit时，会出现一个进度条。

我想手动显示和隐藏它（因为我的一些xhr请求有点长），这是可能的吗？

（在Turbolinks 3中，有Turbolinks.ProgressBar.start();但它不是公共API，不再起作用）

- Nicolas Maloeuvre

Answer 1

Turbolinks 5在单例控制器对象中更深地拥有ProgressBar实例。以下内容应该可以正常工作：

function safeStartTurbolinksProgress() {
  if(!Turbolinks.supported) { return; }
  Turbolinks.controller.adapter.progressBar.setValue(0);
  Turbolinks.controller.adapter.progressBar.show();
}

function safeStopTurbolinksProgress() {
  if(!Turbolinks.supported) { return; }
  Turbolinks.controller.adapter.progressBar.hide();
  Turbolinks.controller.adapter.progressBar.setValue(100);
}

- dimroc

Answer 2

您可以在任何时候执行Turbolinks.ProgressBar.disable()来使其消失。或者，您甚至可以通过在这些阶段添加类并使用一些CSS技巧来创建自己的进度条。

if Turbolinks.ProgressBar
  // Do stuff

$(document).on 'page:fetch', ->
  // Do stuff while the fetch is starting

$(document).on 'page:receive', ->
    // It's almost done

$(document).on 'page:change', ->
  // It's done

$(document).on 'page:restore', ->
  // It's really done

- Dennis Best

Answer 3

在Rails 5（Turbolinks 5）中，默认情况下启用进度条。对于任何加载时间超过500毫秒的页面，它会自动出现。

要完全禁用进度条，请将其可见性样式设置为隐藏：

.turbolinks-progress-bar {
  visibility: hidden;
}

更多信息在这里。

- Feuda