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>