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>