rails 4 使用turbolinks实现网页跳转进度条

有时候发现一些大的网站网页链接跳转并不是直接由浏览器跳转,而是自己网站上发起的请求,进而在网页没有完全加载成功的时候显示加载进度条或者动画,已提高用户体验,而不是等着浏览器一片空白不显示在那边加载.这个在网速慢的时候特别有用.在rails4中原生提供turbolinks以实现类似PJAX功能,即后台跳转功能.

个人原创,转载请注明原文出处,并保留原文链接:

http://www.embbnux.com/2014/12/09/rails_4_use_turbolinks_to_show_progressbar_when_click/

参考: turbolinks nprogress-rails

一 打开turbolinks功能

查看rails 4的gemfile,可以发现已经默认加入了turbolinks的gem包:


gem 'turbolinks'

这里我们加jquery-turbolinks包,以jquery实现更方便.


gem 'jquery-turbolinks'

安装新加的gem包: bundle install

在app/assets/javascripts/application.js中加入turbolinks


//= require turbolinks
//= require jquery.turbolinks

重新启动webrick测试:rails server

点击网页上的链接可以发现,已经不是浏览器在跳转了,浏览器并没有在转圈圈.而是直接切换到另一个网页.

二 加入加载进度条

在第一步已经可以实现后台加载网页了,但是给人的感觉是点击链接后没有反应,过了一段时间后莫名的切换了网页,给人很不好的体验.所以很有必要加入加载进度条.已模拟浏览器加载的状态,给用户正在加载的提示.

这里使用nprogress-rails包,直接实现该功能.

在Gemfile加入下面:


gem 'nprogress-rails'

安装:bundle install

在app/assets/javascripts/application.js中加入:


//= require nprogress
//= require nprogress-turbolinks

由于用的是bootstrap框架,这里需在app/assets/stylesheets/application.css中加入:


*= require nprogress
*= require nprogress-bootstrap

再重启webrick测试,点击链接就能看到有进度条效果了.

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload the CAPTCHA.