Rails turbolinks 长请求不显示页面加载 [英] Rails turbolinks long request doesn't show page load

问题描述

在 Rails 中使用 turbolinks，如果一个请求需要很长时间，无论是否预期，浏览器都没有通常的提示来表明任何事情都在发生.

解决方案

我创建了一个 gist 来解决这个问题，它使用加载对话框在请求耗时超过 500 毫秒时自动弹出，这是可配置的.

https://gist.github.com/cpuguy83/5016442

@PageSpinner =自旋:(ms=500)->@spinner = setTimeout( (=> @add_spinner()), ms)$(document).on 'page:change', =>@remove_spinner()spinner_html: '<div class="modal hidefade" id="page-spinner"><div class="modal-head card-title">请稍等...</div><div class="modal-body card-body"><i class="icon-spinner icon-spin icon-2x"></i>&emsp;正在加载...

'微调器:空add_spinner: ->$('body').append(@spinner_html)$('body div#page-spinner').modal()remove_spinner: ->clearTimeout(@spinner)$('div#page-spinner').modal('hide')$('div#page-spinner').on 'hidden', ->$(this).remove()$(document).on 'page:fetch', ->PageSpinner.spin()

Using turbolinks in Rails, if a request is taking a long time, either expectedly or not, the browser does not have the usual cues to show that anything is happening at all.

解决方案

I have created a gist which works around this issue using a loading dialog which automatically pops up if the request is taking more than 500ms, which is configurable.

https://gist.github.com/cpuguy83/5016442

@PageSpinner =
  spin: (ms=500)->
    @spinner = setTimeout( (=> @add_spinner()), ms)
    $(document).on 'page:change', =>
      @remove_spinner()
  spinner_html: '
    <div class="modal hide fade" id="page-spinner">
      <div class="modal-head card-title">Please Wait...</div>
      <div class="modal-body card-body">
        <i class="icon-spinner icon-spin icon-2x"></i>
        &emsp;Loading...
      </div>
    </div>
  '
  spinner: null
  add_spinner: ->
    $('body').append(@spinner_html)
    $('body div#page-spinner').modal()
  remove_spinner: ->
    clearTimeout(@spinner)
    $('div#page-spinner').modal('hide')
    $('div#page-spinner').on 'hidden', ->
      $(this).remove()

$(document).on 'page:fetch', ->
  PageSpinner.spin()

这篇关于Rails turbolinks 长请求不显示页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！