Turbolinks 5：显示进度条

Question

调用Turbolinks.visit时有进度条

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

（在 Turbolinks 3 中，有 Turbolinks.ProgressBar.start()；但它不是 public api 并且不再工作）

Answer 1

您可以随时执行 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

Answer 2

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);
}

Answer 3

在Rails5(Turbolinks 5)中，进度条默认开启。对于加载时间超过 500 毫秒的任何页面，它都会自动显示。

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

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

更多信息here。

Turbolinks 5：显示进度条

Turbolinks 5 : Show progress Bar

ruby-on-rails

turbolinks