JQuery Load enquanto carrega dados

Alexandre Prezzi · 21 de fevereiro de 2019

Estou criando um dashboard usando o chartjs.

Os gráficos são gerados através de dados do banco, como alguns dados são demorados , pensei em criar um "loading" enquanto esses dados sao carregados e após isso os graficos sao mostrados....

Usei a ideia de criar uma div logo no inicio do body

 <body> 
        <div class="loader"></div>

e usei a funçao load para mostrar essa div e em seguida ocultar ela

<head>
  <script type="text/javascript">
        $(window).load(function() {
            $(".loader").fadeOut("slow");
        });
        </script>
</head>

No localhost funciona perfeitamente, quando eu passo pro online isso não funciona, fica uma tela em branco e o "loading" aparece muito rápido quando os dados ja estão carregados...

Alguém sabe me dizer se tem algum problema com o uso dessa função?

DiF · 21 de fevereiro de 2019

@Alexandre Prezzi Olá,

Na verdade você está fazendo nada mais do que carregar o elemento.

Se você quiser colocar o loading e mostrar depois já carregado os dados podes usar a função beforesend e o done()

$.ajax({
   url: 'dados.php',
   type: 'post',
   beforeSend: function(){
     // mostra o loading
   }
   
 }).done(function(retorno){

    // mostra o gráfico  e remove o loading
})

Alexandre Prezzi · 22 de fevereiro de 2019

Bom dia tudo bom ? A sua ideia funcionou perfeitamente, porém somente local, o que to achando bem estranho.

No localhost tanto da forma que eu fiz quanto a forma q tu sugeriu funcionam perfeitamente.

Quando é publicado o "loading" aparece rapidamente quando os dados ja estão carregados, perdendo a razão.

Penso que possa ser algo no servidor de hospedagem, alguma lentidão, de repente o numero de dados. Unica coisa q acho estranho é isso... funciona local mas nao funciona no ar.