有时候发现一些大的网站网页链接跳转并不是直接由浏览器跳转,而是自己网站上发起的请求,进而在网页没有完全加载成功的时候显示加载进度条或者动画,已提高用户体验,而不是等着浏览器一片空白不显示在那边加载.这个在网速慢的时候特别有用.在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测试,点击链接就能看到有进度条效果了.