Estou tentando fazer um sistema de load
para informar ao usuário que a página esta sendo carregada.
Tenho uma página em php que monta um relatório bem grande, e ele leva em torno de 10 segundos para ser exibido. Em quanto isso a página fica em branco. O que eu quero é colocar um load
até que a página seja carregada.
Tentei fazer assim, no inicio do php eu coloquei isso:
<div class="se-pre-con"><p>PROCESSANDO DADOS</p></div>
Coloquei antes da tag
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background: url(../Img/Loading.gif) center no-repeat #FFFFFF;
}
.se-pre-con p {
text-align: center;
height: 15px;
position: absolute;
top: 0;
bottom: -125px;
left: 0;
right: 0;
margin: auto;
}
O no jquery esta assim:
$(window).on("load", function () {
$(".se-pre-con").fadeOut();
});
O problema e que o load até aparece, porém ele aparece depois de uns 5 segundos. Como faço para ele aparecer e depois o php começar a carregar os dados? Tem como?
------------ EDIT
Segue minha página em php, assim vcs podem me falar se estou fazendo algo errado.
<!-- Loading -->
<div class="se-pre-con"><p>PROCESSANDO DADOS</p></div>
<?php
// AQUI ESTOU CONECTANDO COM O BANCO DE DADOS E MONTANDO UM ARRAY COM O RESULTADO
?>
<!-- Relatório -->
<table class="relatorio">
<tr>
<td>ID</td>
<td>PRODUTO</td>
<td>QUANTIDADE</td>
<td>VALOR</td>
</tr>
<?php
// Aqui monto o relatório com o array
foreach ($curva as $c) {
?>
<tr>
<td><?= $c['id'] ?></td>
<td><?= $c['nome'] ?></td>
<td><?= $c['qtd'] ?></td>
<td><?= $c['valor'] ?></td>
</tr>
<?php
}
?>
</table>
ajax
?