Question

在我的网站上，我想添加一些用户友好的脚本。首先，我想添加一些点击后加载gif。当用户点击链接时（重定向之前），用户会看到加载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>

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

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

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，禁止在脚本完成之前加载页面

1 个答案: