load in css and jquery

Question

I’m trying to make a system of load to inform the user that the page is being loaded.

I have a php page that mounts a very large report, and it takes around 10 seconds to display. On how much this page turns blank. What I want is to put a load until the page is loaded.

I tried to do so, at the beginning of php I put this:

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

I put before the 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;
}

No jquery looks like this:

$(window).on("load", function () {
    $(".se-pre-con").fadeOut();
});

The problem is that the load even appears, but it appears after about 5 seconds. How do I make it appear and then php starts loading the data? Is there a way?

------------ EDIT

Follow my php page, so you can tell me if I’m doing something wrong.

<!-- 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>

Answer 1

You better make a page that only carries the div:

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

And another page that only loads the content of the report

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

Then I’d be like this:

http://www.meusite.com.br/relatorio -> Just answer the div

http://www.meusite.com.br/relatorio-corpo -> Answers the body of the report.

And with ajax you carry the content:

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

----- EDIT

Remembering that this is not the best approach, since it will be moving HTML data across the network. The best would be to answer the data in JSON and mount the HTML using Javascript

Answer 2

Your problem is that PHP is still sending the answer to the browser, and for this reason, the page has not finished loading.

A more interesting strategy is to open your empty report, show the div and only then load the PHP data using an AJAX call.

A very simple example would be:

$(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 */
    }
  });
});