jQuery，禁止在脚本完成前加载页面

Question

在我的网站上，我想添加一些用户友好的脚本。首先，我想在点击加载 gif 后添加一些。当用户点击 link（重定向前）时，用户会看到正在加载 gif（持续时间或更短时间），然后才进行用户重定向。所以，我的 html（使用 ruby 代码注入）：

<% for post in Posts do %>
    <%= link_to post do %>
      <div id="post-<%= post %>">
        <div id="loading_gif" style="margin: 75px 0 0 125px; padding: 0 auto; display: block; visibility: hidden; height: 50px; width: 50px; position: absolute">
          <%= image_tag '/loading/main-loading.gif' %>
        </div>
        <%= post.theme %>
        <%= post.picture %>
      </div> 
    <% end %>
<% end %>

还有我的脚本：

<script>
  $("post-<%= post %>").click(function(){
    $('#loading_gif').css('visibility', 'visible');
    return true;
  });
  $.delay(1000);
</script>

使用该脚本时我遇到了一个问题：当我返回原来的页面时，我仍然看到加载动画。

但我真的不明白如何让脚本完成他的工作，然后暂停（向用户显示 post 正在加载（例如 1 秒或更短时间））然后才重定向至 post。

Answer 1

试试这个：

<script>
  $("post-<%= post %>").click(function() {
    var href = $(this).parent().attr("href");
    $('#loading_gif').css('visibility', 'visible');

    setTimeout(function() {
      $('#loading_gif').css('visibility', 'hidden');
      window.location = href;
    }, 1000);

    return false;
  });
</script>

jQuery，禁止在脚本完成前加载页面

jQuery, forbid load page before script is done

javascript

jquery

ruby-on-rails

loading