1

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>
10
  • Já tentou: $(document).ready(function () { }); ??
    – Aline
    7/03/2017 às 19:24
  • 1
    Talvez o problema seja o tamanho do gif, esses 5 segundos pode ser o tempo que demora pro navegador carregar o gif, em vez disse tente colocar um <h1> só pra testar se é renderizado logo que carrega a página
    – LuKs Sys
    7/03/2017 às 19:25
  • Está utilizando ajax? 7/03/2017 às 19:25
  • @MaxRogério não estou usando ajax 7/03/2017 às 19:53
  • @LuKsSys já tentei remover a imagem, e o problema não e esse. 7/03/2017 às 19:53

2 Respostas 2

3

O melhor é você fazer uma página que carrega só a div:

<!-- Loading -->
<div class="se-pre-con"><p>PROCESSANDO DADOS</p></div>

E outra página que carregue só o conteudo do relatório

<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
}
?>

Daí ficaria assim:

http://www.meusite.com.br/relatorio -> Responde só a div

http://www.meusite.com.br/relatorio-corpo -> Responde o corpo do relatório.

E com ajax você carrega o conteudo:

$.ajax({
    'url': 'http://www.meusite.com.br/relatorio-corpo',
    'success': function(responseHtml) {
         $(".se-pre-con").html(responseHtml);
     }
 });

----- EDIT

Lembrando que essa não é a melhor abordagem, já que irá ficar trafegando dados de HTML pela rede. O melhor seria responder os dados em JSON e montar o HTML usando Javascript

7
  • Legal, estou tentando fazer funcionar com base na sua ideia. Bom eu ja tenho os dados em JSON como faria para o javascript preencher o relatório ? 7/03/2017 às 20:24
  • Você poderia fazer algo do tipo: 7/03/2017 às 20:27
  • Consegui fazer da sua forma aqui. Deu certo. Mas poderia colocar um exemplo de como fazer com JSON 7/03/2017 às 20:29
  • Você poderia fazer algo do tipo: $.ajax({ 'url': 'meusite.com.br/relatorio-json', 'success': function(responseJson) { $.each(responseJson, function(key, value)) { "<tr><td>" + value.id + "</td></tr>"; } } }); 7/03/2017 às 20:33
  • Aqui tá melhor: jsfiddle.net/o39fgvk4 7/03/2017 às 20:34
1

Seu problema é que o PHP ainda está enviando a resposta ao navegador, e por este motivo, a página ainda não terminou de carregar.

Uma estratégia mais interessante é abrir o seu relatório vazio, mostrar a div de carregamento e só então carregar os dados do PHP, utilizando uma chamada de AJAX.

Um exemplo bem simples seria:

$(document).ready(function(){
  $(".se-pre-con").fadeIn();
  $.ajax({
    url: 'meu php',
    success: function(response) {
      /* Monte aqui o seu HTML */
      /* Ao final, remova a div novamente: */
      $(".se-pre-con").fadeOut();
    }, 
    error: function(error) {
      /* Trate os erros */
    }
  });
});
3
  • Vou montar o html dentro do Javascript? Acho que não iria dar certo. Para facilitar eu vou editar a pergunta com minha pagina php. Se puder olhar e me explicar melhor. 7/03/2017 às 19:55
  • @HugoBorges, como o script php vai demorar a responder, eu vejo duas opções: sentar e esperar carregar, ou fazer isso tudo via AJAX como sugeri. Você não precisa necessáriamente montar o HTML pelo Javascript, pode fazer isso tudo no php e apenas pegar este resultado e inserir novamente na DOM.
    – jlHertel
    7/03/2017 às 19:58
  • entendi, mas não sei como fazer isso na minha estrutura atual, poderia me ajudar? coloquei como estou montando o relatório. 7/03/2017 às 20:00

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 .