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