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!