Aparecer gif ao mudar de pagína

[Ricard0 0]

Eu tinha feito um tópico, anos atrás.. que por sinal já nem existe mais rs. Minha dúvida assim como hoje (esqueci) é: Ao mudar de página (ao clicar nos links do menu), aparecer um gif loading que está em hidden e depois sumir.

 

Aqui está minha div class do gif:

 

<div class="loading">
                
      <img src="images/ajax-loader.gif" />
                
 </div><!--loading>

 

E esse é meu menu:

 

<div id="menu">
        
                <a href="#">HOME</a>
                <a href="#">INFORMAÇÕES</a>
                <a href="#">CADASTRO</a>
                <a href="#">DOWNLOADS</a>
                <a href="#">COMUNIDADE</a>
                <a href="#">DOAÇÕES</a>
                <a href="#">REGRAS</a>
                <a href="#">EQUIPE</a>
                <a href="#">FÓRUM</a>
            
</div><!--menu-->

 

Tinham me dito que é com ajax, só que não me lembro realmente.

 

Obrigado!

[Ricard0 0]

Consegui já, obrigado.

 

$(document).ready(function(){
var content = $('#home');
 
//pre carregando o gif
loading = new Image(); loading.src = 'images/ajax-loader.gif';
$('#menu a').live('click', function( e ){
e.preventDefault();
content.html( '<img src="images/ajax-loader.gif" class="loading" />' );
 
var href = $( this ).attr('href');
$.ajax({
url: href,
success: function( response ){
//forçando o parser
var data = $( '<div>'+response+'</div>' ).find('#home').html();
 
//apenas atrasando a troca, para mostrarmos o loading
window.setTimeout( function(){
//content.fadeOut('slow', function(){
//content.html( data ).fadeIn();
content.html( data ).show();
//});
}, 500 );
}
});
 
});
});