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

Carregando conteudo com ajax, trocando a URL com jQuery

O método .live() do jQuery

Como debugar JavaScript com o Firefox ? – erros comuns