4

Bom faço uma requisição via AJAX, assim posso colocar um load na tela e removê-lo quando o AJAX carregar a pagina.

O problema é que preciso fazer o load aparecer apenas se a requisição demorar mais de 2 segundos.

Estou fazendo assim:

$(document).ready(function () {
            $(".loading").show();
            $.ajax({
                url: 'APP?pagina=<?= $pagina ?>',
                success: function (response) {
                    $("#app").html(response);
                    $(".loading").hide();
                }
            });
        });

loading é a DIV que contam o loading, e ela so pode aparecer se a requisição demorar mais de 2 segundos.

Alguém sabe fazer isso?

2
  • você conhece o timeout?
    – durtto
    Commented 8/03/2017 às 14:43
  • Sim tentei usar ele aqui mais estava dando errado, pois a div estava aparecendo depois de 2 segunda e não saia mais da tela. Acho que eu não estava fazendo da forma correta Commented 8/03/2017 às 14:44

1 Resposta 1

4

Dá pra utilizar um combo com status de variável e o setTimeout.

var showLoader = false;

$(document).ready(function () {
  var timeoutLoader = setTimeout(function () {
    showLoader = true;
    $(".loading").show();
  }, 2000); // 2000ms = 2 segundos

  $.ajax({
    url: 'APP?pagina=<?= $pagina ?>',
    success: function (response) {
      if (showLoader) {
        showLoader = false;
      } else {
        clearTimeout(timeoutLoader);
      }

      $(".loading").hide();
      $("#app").html(response);
    }
  });
});
  1. Você cria uma variável de status do loader, deixando ela inicialmente como false.
  2. Antes da chamada do AJAX, cria-se um timeout de 2 segundos e caso o tempo termine e a chamada AJAX não tiver terminado, o loader irá aparecer.
  3. Quando a chamada finalizar, irá verificar o status do loader através da variável showLoader, se for true, esconde o loader, se não, limpa o timeout, para que ele não execute e mostre o loader.

Existem outras formas de fazer, mas essa é uma delas. Uma observação: 2 segundos é um tempo curto, veja se há realmente a necessidade disso na sua chamada AJAX, veja se ela demora muito ou é muito rápida.

4
  • Obrigado deu certo, em questão dos 2 segundos eu pensei assim. O site em média demora menos de 2 segundos para carregar, porém em relatórios pode demorar até 10 segundos, por isso quero que o loading só apareça quando a pagina demorar. Entendeu? Commented 8/03/2017 às 16:07
  • Tem um problema na sua resposta, o load não some da página. Commented 8/03/2017 às 16:09
  • Talvez tenha dado conflito no clearTimeout ao esconder o loader. Editei a pergunta e estarei escondendo o loader mesmo se ele não aparecer. Commented 8/03/2017 às 17:16
  • ok vlw amigo deu certo Commented 8/03/2017 às 17:31

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 .