Make div appear in hers after 2 seconds with jQuery

Question

Make div appear in hers after 2 seconds with jQuery

Navigation

#1 by (2 votes)
#2 by (-1 votes)

4

I'm building the loading system using Jquery.

And they consist of a div that covers all the splice in the browser and that when loading all elements of the page, Jquery hides the div.

The system is working very well, but 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--><divclass="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

asked by anonymous 25.08.2016 / 18:54

2 answers

-1

Try using setTimeout.

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

25.08.2016 / 19:03

Add values to vector and return value in true condition Comparing Columns in SQL Server

score 2 · Accepted Answer

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--><divclass="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>