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();
.