Title: jQuery/JavaScript wait for page to load, but no shorter than specified time
Tags: javascript;jquery
Question: I'm having the following issue:
I want to display an overlay until the page loads completely, which works just fine.
The problem is that on fast connections the overlay would disappear immediately, which is not what I want to achieve.
I was trying to do it the following way:
$(document).ready(function(){
setTimeout(function(){
$(window).load(function(){
$('#overlay').fadeOut(1200);
});
},1500);
which seemed logical to me. Didn't work. I replaced setTimeout with setInterval, didn't work, too. I put the $(window).load...etc. in a function and called it with an external setTimeout, no success. The best result in regard to that additional timer was, that browsers ignored it altogether; most of the time the overlay just stays there, nothing happens.
What am I missing?
Comment: after the document is ready... it will wait 1500ms before setting the window load function. SETTING it.

Comment: under the best conditions this will never fire on window load event, because its loads faster than 1500 ms

Here is the accepted answer: You certainly don't need $(window).load... within the setTimeout function. In fact, putting it within the timeout will ensure that it never executes since the window.load event will have already fired before you assign it your function to fadeOut the overlay.
I've adjusted my code based on your feedback. The basic principle is to determine how long it took to get everything ready and then reduce the timeout based on the time already elapsed. This way your fastest connections will still get a delay while your slowest connections will execute the fadeout immediately.
Live Demo
//Put this line in a script tag as high up on the page as possible
window.timeInMs = Date.now();
Instead of document.ready which executes after the document is loaded, use window.load which executes after the entire page has loaded (frames, objects, images) - src.
$(window).load(function(){
var maxTimeout = 1500;//Everyone waits at least this amount, including fast browsers.
//Compute the elapsed time, default to 0 if more than maxTimeout has elapsed.
var remainingTime = Math.max(maxTimeout - (Date.now() - window.timeInMs), 0);
setTimeout(function(){
$('#overlay').fadeOut(1200);
}, remainingTime);
Comment for this answer: The line `$(document).ready(function(){` is the "check if everything is ready" part of the equation. As you've observed, the time it takes for this code to execute can vary widely based on the latency and bandwidth of the connection as well as the processing power of the computer. Unfortunately, this reality is unavoidable. My updated answer may be closer to what your looking for, but getting a standardized startup time across all browsers/devices is practically impossible.
Comment for this answer: You should be able to achieve what your looking for with the above code, just swap out `$(document).ready(function(){});` with `$(window).load(function(){});`.
Comment for this answer: The problem with this solution is, that it waits 1500ms AFTER every single element has been loaded. It would generate unnecessary waiting time for those on slow connections. I want the script to wait for a specified time, check if everything is ready, and initiate the fadeOut.
Comment for this answer: I'm specifically looking for a timer attached to the $(window).load function. I want everything (including images etc.) to be loaded before the overlay fades out. The fadeOut has to be initiated after every single object present on the site is fully loaded, but not sooner than 1500ms after the DOM is ready. Latency or processing power aren't really an issue.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:08/31/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery>', 'Title': 'jQuery/JavaScript wait for page to load, but no shorter than specified time', 'ViewCount': 181, 'id': 18552325, 'user_AboutMe': None, 'user_AccountId': 2817807.0, 'user_DisplayName': 'Marco', 'user_Reputation': 31.0, 'user_Views': 6.0, 'user_id': 2736139.0}}