jQuery, verbieten laden Seite vor dem Skript ist fertig

Question

Auf meiner Website möchte ich einige benutzerfreundliche Skripte hinzufügen. Zuallererst möchte ich einige nach dem Laden Gif hinzufügen. Wenn der Benutzer den Link (vor dem Weiterleiten) trifft, sieht man das Laden des Gifs (für Sekunden oder weniger) und nur dann das Umleiten des Benutzers. Also, meine html (mit Ruby-Code-Injektion):

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

Und mein Skript:

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

Mit diesem Skript habe ich ein Problem: Ich habe noch die Ladeanimation sehen, wenn ich zur Seite zurück, wo Ich komme aus.

Aber ich verstehe wirklich nicht, wie Skript seine Arbeit machen lassen, dann pausieren (um Benutzer anzuzeigen, dass Post lädt (zum Beispiel für 1 oder weniger Sekunden)) und nur dann umleiten, um zu veröffentlichen.

Answer 1

Versuchen Sie folgendes:

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