Rails 使用 Turbolinks 实现网页进度条

jasonliu · 2015年09月09日 · 最后由 vincentjiang 回复于 2015年09月10日 · 5642 次阅读

之前在 Ruby-China 上遇到一些朋友在询问怎么实现网页进度条,我看了下没怎么深究,这次在做 GitHub 账户登录的过程中碰到一个问题:由于认证过程会发送几次 http 请求,点击登录按钮之后发现没有任何反应,过几秒之后才会进入登录状态,开始还以为是按钮不起作用,这样的体验是非常不好的,我们希望有个进度条能够显示当前请求的进度,幸运的是,Rails 自带了 gem 包可以帮助实现这个功能,那就是 turbolinks。

turbolinks 的主要作用是为了加速页面渲染,进度条功能只是它提供的功能之一。

turbolinks

如果 turbolinks 3 正式发布之后(目前还是开发版本),也许我这篇文章就没有什么作用了,因为版本 3 已经默认进度条功能是开启状态,如果用的是 turbolinks 3 之前的版本,你只需要做简单的配置,只需要一行代码:

#app/assets/javascripts/application.js
Turbolinks.enableProgressBar();

该行代码的意思是打开 Turbolinks 的进度条功能,当重新点击网站页面的时候,进度条就会出现,超 easy!

如果想定制进度条的外观,可以通过 CSS 来实现:

#app/assets/stylesheets/application.scss
html.turbolinks-progress-bar::before {
  background-color: red !important;
  height: 5px !important;
}

然后点击网站页面,进度条变成红色,并且宽度增加:

是不是很简单😄,建议多阅读官方的文档,可以了解到 turbolinks 的更多功能。

转自我的博客:http://liuzxc.github.io/articles/

好赞,先收藏!其实我最想看到的就是各种小小的功能模块啊,或者页面模块,怎么实现的……

我的项目使用了

#app/assets/javascripts/application.js
Turbolinks.enableProgressBar();

之后在生产环境中发现rake assets:precompile老是报错,有朋友遇过这种问题不?

看效果有点意思

直接用现成的 nprogress-rails 😢

@etnl nprogress-rails 也有相同的功能,只是 turbolinks 是 Rails 默认添加的 gem,用起来会方便些

#3 楼 @martin91 重启服务器就好了,暂时不知道是啥原因 😪

需要 登录 后方可回复, 如果你还没有账号请 注册新账号