3

Tenho uma página que é carregada via load do jQuery. Dentro desta página existe uma consulta SQL que demora em média 8 segundos.

Gostaria de colocar algum indicativo que a consulta está carregando, pode ser uma barra de progresso, exibir porcentagem, um circulo rodando, qualquer coisa. Dei uma procurada no Goolge mas não encontrei nada que me ajuda. Alguém conhece alguma forma de fazer isso?

Script que carrega a página:

$(document).ready(function(){
    $('.clica').click(function(){
        $('#new').load('opcoesConsultaSiga.php?cond='+$(this).val());
    });
});

HTML:

<button class="clica" value="-1">Exibir Tudo</button>
<button class="clica" value="2">Ordenar por estoque </button>
<button class="clica" value="4">Ordenar por custo </button>
<div id="new"></div>
0

2 Respostas 2

3

A forma mais simples de fazer isso seria adicionando um ícone de loading...

jQuery(document).ready(function($) {
   
  $("#carregar").on('click', function(){

    $("#loading").fadeIn('fast');

    setTimeout(function(){
      $("#loading").fadeOut('fast');
    }, 5000);

  });

});
#loading {
  display:none;
  position:fixed;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.3);
  width:100%;
  height:100%;
  overflow:hidden;
  padding:50% 0;
  margin:0;
  text-align:center;
}

#loading img{
  display:inline-block;
  margin:-8px 0;
}
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="carregar">Carregar</button>
<div id="loading">
  <img src="https://i.sstatic.net/Z4BUx.gif" alt="Carregando..." title="Carregando...">
</div>

JsFiddle

Então bastaria abrir o loading antes da execução do AJAX, e oculta-lo quando estiver completo:

$(document).ready(function(){
   $('.clica').click(function(){
   $("#loading").fadeIn('fast'); // Exibi o loading antes da requisição
      $.ajax({
         url: 'opcoesConsultaSiga.php?',
         type: 'GET',
         data: {cond: $(this).val()},
         success: function(data){
            $('#new').html(data);
         },
         error: function(x, y, z){
            $('#new').html($('<p />').text('Erro ao processar requisição: ' + y));
         },
         complete: function(){
            $("#loading").fadeOut('fast'); // Oculta o loading ao terminar a requisição
         }
      });
   });
});
4
  • Obrigada pela resposta @KaduAmaral, fiz uma atualização na pergunta explicando melhor o problema e coloquei meu código. De acordo com o código que tenho, onde poderia colocar o $("#loading").fadeOut('fast');?? Tentei fazer de uma forma semelhante que tinha encontrado antes e não deu certo. Commented 26/10/2015 às 11:43
  • Oi @AmandaLima, atualizei a resposta com a tua requisição... Testa e veja se funciona (visto que não testei...). ;)
    – KaduAmaral
    Commented 26/10/2015 às 11:46
  • Funcionou, obrigada! Porém coloquei $("#loading").fadeIn('fast'); dentro de $('.clica').click(function(){ Commented 26/10/2015 às 12:02
  • Isso, na verdade deveria ser ali mesmo, ficou errado na resposta. vou corrigir. ;)
    – KaduAmaral
    Commented 26/10/2015 às 12:09
3

Podes usar o método ready do jQuery.

Crias uma div com um "loader" a seguir ao body e depois escondes assim que a página tenha sido completamente carregada.

$( document ).ready(function() {
  $('#divLoader').hide();
});

Também podes usar o .ajaxStart() / .ajaxStop()

jQuery Ready

jQuery Ajax Start/Ajax Stop

Duplicata, Post com um problema semelhante

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .