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>