2

Olá, eu tenho o seguinte trecho de código abaixo:

Código

div#container{
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left:0px;
	background-color: #eee;
	display: block;
}

div#loader{
	border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;	
	position: fixed;
	top: 0px;
	left:0px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>PÁGINA LOAD</title>
	<link rel="stylesheet" href="css/style.css" media="screen"/>
	<script src="js/jquery-2.1.3.js"></script>
</head>
<body>
	<div id="container">
		<div id="loader"></div>
		<div id="content">
      <p>Exibir meu código PHP aqui após o carregamento total da página</p>
		</div>
	</div>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/jsor/jcarousel/master/dist/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
  // Este evendo é acionado após o carregamento da página
  $(window).on('load', function(){
    //Após a leitura da pagina o evento fadeOut do loader é acionado, esta com delay para ser perceptivo em ambiente fora do servidor.
    jQuery("#loader").delay(2000).fadeOut("slow");
  });
</script>
</body>
</html>

Objetivo

Eu gostaria que o meu conteúdo PHP fosse exibido na tela somente após carregar 100% pois esse trecho PHP é um select no banco de dados que demora um bom tempo para exibir dando aspecto que a página não está respondendo.

Problema

O loader sempre é exibido junto ao conteúdo PHP, sendo assim ele só é exibido após a requisição finalizar. Tentei diversas formas antes de postar no fórum, se alguém puder mostrar um método que funcione será de grande ajuda!

4
  • O loader deve desaparecer somente quando o código PHP estiver inserido no HTML? Commented 5/08/2019 às 17:04
  • Creio que vc deverá usar Ajax para carregar apenas o conteúdo da div #content.
    – Sam
    Commented 5/08/2019 às 17:04
  • Exatamente @VictorCarnaval Commented 5/08/2019 às 17:04
  • Como posso fazer isto @Sam? Poderia me dar um exemplo por favor! Commented 5/08/2019 às 17:05

1 Resposta 1

3

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

3
  • Excelente resposta @Sam, indica algum material para leitura sobre AJAX? Commented 5/08/2019 às 17:33
  • Tem vários no Google. Pesquise por "javascript ajax" que os primeiros resultados da busca terão bons materiais para ler.
    – Sam
    Commented 5/08/2019 às 17:34
  • beleza, obrigado pela força! Commented 5/08/2019 às 17:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .