jQuery, visualizzazione caricamento div di pagina solo se la pagina impiega più di 2 secondi per caricare

Question

Questa è la mia prima domanda, quindi spero di fornire dettagli sufficienti. Ho il seguente codice in 4 pagine su un sito web:

$(document).ready(function() { 
    $('#page_loading').slideDown(500); 
}); 

jQuery(window).load(function() { 
    setTimeout(function() {$('#page_loading').slideUp(500);}, 1500); 
}); 

Quello che sto cercando di realizzare: Durante la navigazione approfondita le 4 pagine, avere il div scorrevole #page_loading giù solo se la pagina richiede più di 2 secondi caricare. Se le pagine impiegano meno di 2 secondi per essere caricate (è stato visitato prima e la maggior parte delle immagini sono memorizzate nella cache), il div di caricamento non verrà visualizzato.

A questo punto, anche se la pagina impiega meno di un secondo per caricare quel div di caricamento appare ancora e scompare, ed è piuttosto fastidioso.

Grazie, Cristian.

Answer 1

Questo farà il trucco?

var showTimeout = setTimeout(function() { 
    $('#page_loading').slideDown(500); 
}, 2000); 

jQuery(window).load(function() { 
    clearTimeout(showTimeout); 
    $('#page_loading').slideUp(500); 
});