A loading appears while reading the loading of JQuery content

Question

A loading appears while reading the loading of JQuery content

Navigation

#1 by (1 votes)

2

I have the following code:

<div id="conteudo"></div>

<script>
      var qnt_result_pg = 20;
      var busca = "";
        var pagina = 1;
            $(document).ready(function () {
                listar_usuario(pagina, qnt_result_pg, busca);
            });
            function listar_usuario(pagina, qnt_result_pg, busca){
      var dados = {
                    pagina: pagina,
          busca: busca,
                    qnt_result_pg: qnt_result_pg
                }
                $.post('<?php echo $caminhoAbsoluto; ?>/listar-pagamentos-pendentes.php', dados , function(retorna){
                    $("#conteudo").html(retorna);
                });
            }
</script>

It returns me the list of users registered on my page, but in the bank has more than 7,000 entries and even have placed a pagination, it takes a few seconds to open. How can I make a loading appear while the content is not loaded?

jquery

asked by anonymous 24.12.2018 / 13:11

1 answer

Class object generation error Query to update field from one table based on another

score 1 · Accepted Answer

You can put an image or an element made with CSS to appear while the data is loaded, after it is loaded simply hide the element of the page.

In JavaScript you have to put the callback done() that runs when the function completes its actions by getting: $.post(// seu codigo).done(//acao após concluir post) .

This link has the jQuery documentation $ .post that has examples with done() .

Following is a sample code collecting data in JSON.

$(function(){
  $.getJSON("http://mysafeinfo.com/api/data?list=englishmonarchs&format=json", function(data){
    $.each(data, function(key, val){
      $(".monark").append("<tr>"+
      "<td>"+val.id+"</td>"+
      "<td>"+val.nm+"</td>"+
      "<td>"+val.cty+"</td>"+      
      "<td>"+val.hse+"</td>"+      
      "<td>"+val.yrs+"</td>"+
      "</tr>");
    });
  }).done(function(){
    $(".outer").hide("slow");
  });
});

.outer {
  display: table;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.8);
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  text-align: center;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><divclass="outer">
  <div class="middle">
    <div class="inner">
      <div class="loader"></div>
    </div>
  </div>
</div>

<table class="monark"></table>