Div appears in her after 2 seconds with jQuery

Asked

Viewed 499 times

4

Guys I’m mounting the loading system using Jquery.

And they consist of a div that covers the entire tala in the browser and that when all elements of the page are loaded, Jquery hides the div.

The system is working very well, however it is displayed even when the page is very light and fast.

I wanted to know how to make it appear only if the page takes more than 2 seconds to load.

Follow the load code.

$(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>

javascript jquery

2 answers

2


What I tried to explain in the commentary is this.

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>

  • I tried it here and it didn’t work. the loading didn’t appear on a page that takes a long time to load

  • and in the log do not present the console.log('demorou para carregar');?

  • This is not appearing the console.log('demorou para carregar');. appears to just the finished.

  • and how are you testing how long the page takes? And what do you consider loaded? Why if it is not falling into the settimeout if it is why the $(window).load() this being called before.

  • Well not even running your code here in the stack it shows how late you realized? And I’m trying the code on a page that selects in the comic book and assembles a page in html. It takes about 4.23ms to load, because it’s a lot of BD records

  • Exactly, as there is no processing here it does not take 2 seconds and therefore does not display, as expected, the log that took, I edited the answer and commented the var loaded = false;. Voce will see that the log that ended appears and then the loading and the log message that took long appears. that’s why when you enter the setTimeout() He doesn’t know he’s finished loading, because I commented on the line

  • Well I noticed that only displays the loading after the page loads, so the seconds are commenting to count only after the page loads.

  • I managed to make everything work by placing inside the <head> tag has how to make it work by placing at the end of the body?

Show 3 more comments

-1

Try to use setTimeout.

window.setTimeout(function() {
  $(window).load(function() { 
      $(".se-pre-con").fadeOut("fast");
  });
}, 2000);

  • Hi, it didn’t work. now the loading appears and I don’t know more of the screen

  • 1

    @Lucastonon what it is not to show the loading after 2 seconds and yes, display if the page takes more than 2 seconds. If after 2 seconds you haven’t finished loading then displays the loading.

  • @Neuberoliveira is exactly that. You can help me?

  • Tell the truth I have no idea how to do it. The only thing I can imagine would be to put a variable ex var loaded = false before the $(window).load(function() { yes use the setTimeout() and before displaying the loading checks whether loaded==false, there inside the load() defines loaded = true, tendeus?

  • got +/-, I tried to do something similar here now, but it didn’t work. I guess I’m not doing it right.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.