4

Galera estou montando o sistema de loading usando Jquery.

E consistem em uma div que cobre toda a tala no browser e que ao ser carregado todos os elementos da página, o Jquery oculta a div.

O sistema esta funcionando muito bem, porém ele e exibido mesmo quando a página e muito leve e rápida.

Queria saber como fazer para que ele aparece apenas se a página levar mais de 2 segundos para carregar.

Segue o código do load.

$(window).load(function() {
  $(".se-pre-con").fadeOut("fast");
});
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif) center no-repeat #FFFFFF;
}
.se-pre-con p {
  width: 160px;
  height: 15px;
  position: absolute;
  top: 70%;
  left: 48%;
  margin-top: -70px;
  margin-left: -48px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


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



blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>

2 Respostas 2

2

O que eu tentei explicar no comentario é isso.

var loaded = false;
window.setTimeout(function(){
  if(loaded==false){
    //exibe o loading aqui
    console.log('demorou para carregar');
    $(".se-pre-con").fadeIn("fast");
  }
}, 2000);

$(window).load(function() {
  //loaded = true;
  console.log('terminou de carregar');
  //esconde o loading
  $(".se-pre-con").fadeOut("fast");
});
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif) center no-repeat #FFFFFF;
}
.se-pre-con p {
  width: 160px;
  height: 15px;
  position: absolute;
  top: 70%;
  left: 48%;
  margin-top: -70px;
  margin-left: -48px;
}

.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


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



blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>blablablablablalba<br>

8
  • testei aqui e não funcionou não. o loading não apareceu em uma pagina que demora para carregar Commented 25/08/2016 às 18:00
  • e no log nao aprece o console.log('demorou para carregar');? Commented 25/08/2016 às 18:03
  • isso não esta aparecendo o console.log('demorou para carregar');. aparece a apenas o terminou. Commented 25/08/2016 às 18:04
  • e como voce esta testando o tempo que a pagina demora? E o que voce considera como carregado? Por que o se nao esta caindo no if do settimeout é por que o $(window).load() esta sendo chamado antes. Commented 25/08/2016 às 18:12
  • bom nem executando seu código aqui no stack ele mostra o demorou vc percebeu? E estou tentando o código em uma pagina que faz um select no BD e monta uma página em html. Ela demora cerca de 4.23ms para carregar, pois sano muitos registros no BD Commented 25/08/2016 às 18:14
-1

Tente usar o setTimeout.

window.setTimeout(function() {
  $(window).load(function() { 
      $(".se-pre-con").fadeOut("fast");
  });
}, 2000);
5
  • Oi, não deu certo. agora o loading aparece e não sei mais da tela Commented 25/08/2016 às 17:13
  • 1
    @LucasTonon o que ele que nao é mostrar o loading apos 2 segundos e sim, exibir se a pagina demorar mais de 2 segundos. Se apos 2 segundos ainda nao terminou de carregar ai exibe o loading. Commented 25/08/2016 às 17:18
  • @NeuberOliveira é exatamente isso. Você pode me ajudar? Commented 25/08/2016 às 17:20
  • Falar a verdade nao tenho a mimima ideia de como fazer isso. A unica coisa que consigo imaginar seria colocar uma variavel ex var loaded = false antes do $(window).load(function() { ai sim usa o setTimeout() e antes de exibir o loading verifica se loaded==false, ai dentro do load() define loaded = true, tendeu? Commented 25/08/2016 às 17:29
  • entendi +/-, tentei fazer algo parecido aqui agora, mas não deu certo. Acho que não estou fazendo direito. Commented 25/08/2016 às 17:32

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 .