Navegação sem refresh – carregando conteúdo com ajax em div 2
Eu já havia postado essa solução: http://wbruno.com.br/ajax/navegacao-sem-refresh-carregando-conteudo-ajax-em-div/.
Porém, ai a galera começa a querer um ‘efeito de fade’, ‘um gif de carregando..’.
E para resolve isso, é melhor que descartemos a função .load() do jQuery, para usarmos uma em que temos mais controle do que está ocorrendo.
Nesse caso, vou optar pelo $.ajax, já que $.get e $.post, são apenas atalhos para ela.
A maior alteração, será nesse trecho do script anterior:
$("#content").load( href +" #content");
Vamos fazer algo mais sofisticado.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var content = $('#content'); //pre carregando o gif loading = new Image(); loading.src = 'loading.gif'; $('#menu a').live('click', function( e ){ e.preventDefault(); content.html( '<img src="loading.gif" />' ); var href = $( this ).attr('href'); $.ajax({ url: href, success: function( response ){ //forçando o parser var data = $( '<div>'+response+'</div>' ).find('#content').html(); //apenas atrasando a troca, para mostrarmos o loading window.setTimeout( function(){ content.fadeOut('slow', function(){ content.html( data ).fadeIn(); }); }, 500 ); } }); }); }); </script> </head> <body> <ul id="menu"> <li><a href="index.html">Home</a></li> <li><a href="fotos.html">Fotos</a></li> <li><a href="contato.html">Contato</a></li> </ul><!-- /menu --> <div id="content"> <h1>Bem Vindo!</h1> <p>Essa eh a home desse nome pseudo-site.</p> </div><!-- /content --> </body> </html>
Apenas lembrando que as páginas internas, devem continuar com o código HTML completo, pois queremos que nosso site continue funcionando caso não haja suporte a javascript no navegador do usuário.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <ul id="menu"> <li><a href="index.html">Home</a></li> <li><a href="fotos.html">Fotos</a></li> <li><a href="contato.html">Contato</a></li> </ul><!-- /menu --> <div id="content"> <h1>Fotos</h1> Fotos fotos fotos </div><!-- /content --> </body> </html>
Demonstração
Se vc já usou esse script
E teve problemas com os outros scripts do seu site, veja estes links:
Usando lightbox em página carregada com ajax