javascript - 提交后加载屏幕

Question

我正在做一个 RoR 页面，在表单之后，下一页需要很多时间来加载，所以我希望在提交和下一页之间有一个加载页面

<%= form_tag(next_path, :id => 'myform') do %>
    <%= label_tag "My data" %>
    <%= text_field "name", "", placeholder: "Your name" %>
    <%= submit_tag 'Next' %>
<% end %>

提交

Loading... //Here display the loading screen

显示下一页后很长时间

"Hello to the next page User"

编辑

加载屏幕应该位于起始页，因为下一页会执行大量 sql 查询，并且在完成之前不会使用 javascript 函数

欢迎从 Rails 到 jquery 的解决方案

Answer 1

这很简单。将隐藏的“正在加载”消息添加到您的布局(或仅提交到缓慢加载页面的表单)

<div id="slow_warning" style="display:none">
  Loading...
</div>

定义一个显示加载消息的 JavaScript 函数

function show_slow_warning() {
  $("#slow_warning").show();
}

然后每当您触发导航到慢速页面时调用该函数。您可以使用链接的 onclick 处理程序或表单的 onsubmit 处理程序来执行此操作。如果您想要真正棘手(并且干净)，您可以不引人注目地分配处理程序。

$(document).ready(function() {
  $('a.link_to_slow_page').click(function(){
    show_slow_warning();
  });
});