Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Ricard0

Aparecer gif ao mudar de pagína

Recommended Posts

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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 );
}
});
 
});
});

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.