jQuery，在腳本完成之前禁止加載頁面

Question

在我的網站上，我想添加一些用戶友好的腳本。首先，我想添加一些點擊加載後的gif。當用戶點擊鏈接（重定向前）用戶看到加載gif（秒或更少），然後只有用戶重定向。所以，我的HTML（紅寶石代碼注入）：

<% 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>