Skip to main content
1 de 2
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();
      $("#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.

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