Skip to main content
2 de 2
adicionou 208 caracteres ao conteúdo
Sam
  • 80,8mil
  • 22
  • 73
  • 127

Use Ajax para carregar o conteúdo da div #content. Por ser assíncrono, o loader ficará visível até que o conteúdo seja carregado na div.

Faça o seguinte:

Esconda a div #content no seu CSS:

#content{
   display: none;
}

Crie um arquivo .php que irá retornar o HTML que será inserido na div. Esse arquivo .php será requisitado pelo Ajax. O mesmo código PHP que você colocou na div #content será o que você irá colocar no arquivo .php.

Então você chama o Ajax quando a página for carregada:

<script>
$(function(){

   $("#content").load("pagina.php", function(){

      $("#content").show(); // mostra a div
      $("#loader").fadeOut("slow");

   })

});
</script>

Após o Ajax retornar os dados para a div, o loader será ocultado no callback do Ajax.

A pagina.php é de onde virão os dados. Aí você coloca o nome que quiser (ex., content.php etc...). Nessa página é onde será processado o código PHP que será retornado.

Talvez nem seja preciso ocultar a div #content, já que ela estará vazia inicialmente. Se não quiser esconder, pode dispensar o CSS que coloquei acima e apagar a linha $("#content").show();.

Sam
  • 80,8mil
  • 22
  • 73
  • 127