jQuery loading screen with minimum viewing time

Question

so i have this loading screen that displays information while the page is loading but because of faster internet speeds this can be displayed in a flash.. I would like to add a minimum display time! this is my current code

jQuery(window).load(function() {
    jQuery('.pageLoad').animate({
        opacity: 0
    }, 800, function() {
        jQuery('.pageLoad').css({
            display: 'none'
        });
    });
});

How can i do this?

You actually want to delay the displaying of your content? Sounds like a very bad idea to me. — jeroen
– jeroen, Commented Nov 21, 2013 at 14:46
The loading screen is more of an information screen before viewing the page.. but obviously if the page loads fast you wont have time to read the information before it disappears so I'd like to add a minimum viewing time before that screen disappears but keep it there if they have a really slow loading speed? — TheOne
– TheOne, Commented Nov 21, 2013 at 14:54
@LeviCole You want to make the bit of information independent from the load, so ON pageload, you activate the message for X time. You can use the timeout event. And inside that event you test if everything is loaded, if true you hide the message, if false you display until loaded. All this while the page loads in the background. — Rayf
– Rayf, Commented Nov 21, 2013 at 14:59
Agree with @Rayf, I will modify your example to add that case — pixshatterer
– pixshatterer, Commented Nov 21, 2013 at 15:09
@jeroen I would like to back up this post with an example of a useful situation. I have a form which submits via AJAX and I don't want users hitting submit twice. Upon submitting I actually replace the submit button with a <span> that looks just like it and change it to say "Processing" with a GIF spinner. The form submits so quickly that this looks like a glitch. I give it .5 seconds to spin it's wheels and then place the submit button back in place. — MonkeyZeus
– MonkeyZeus, Commented Nov 21, 2013 at 15:25

jeroen · Accepted Answer · 2013-11-21 15:08:39Z

1

You could put your fade-out method in a function and call that after an xx number of seconds from $(document).ready():

var timeoutID;

jQuery(document).ready(function() {
    // start hiding the message after 2 seconds
    timeoutID = window.setTimeout(hideMessage, 2000);
});

function hideMessage() {
    jQuery('.pageLoad').animate({
        opacity: 0
    }, 800, function() {
        jQuery('.pageLoad').css({
            display: 'none'
        });
    });
}

edited Nov 21, 2013 at 15:08

answered Nov 21, 2013 at 15:01

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pixshatterer Over a year ago

not sure if .ready is what @LeviCole intended, since window.load and document.ready works differently

jeroen Over a year ago

@pixshatterer I know, I did that on purpose so that the message is always more or less the same time there, both on slow and fast connections. You could of course use window.load if you want the countdown to start when all images are loaded, but the idea is the same.

pixshatterer · Accepted Answer · 2013-11-22 00:40:41Z

0

As mentioned by @Rayf, if that piece of info should be read, regardless of page loading speed, you should add some delay to it like this:

// time to read the message...adjust it to the time you feel is right
var msgDisplayTime = 5000,
    interval = 0,
    loaded = false,
    delayed = false,
    fadeLoader = function () {
      jQuery('.pageLoad').animate({opacity: 0}, 800, function () {
          jQuery('.pageLoad').css({display: 'none'});
      });
    };

//timeout for your desired delay time
//it will ask if it is already loaded after delay ends
//triggering the fading of loading overlay
timeout = setTimeout(function(){
  delayed = true;
  if(loaded){
    fadeLoader();
  }
},msgDisplayTime);


//when loaded, it will wait until delay happened
//if not, it will delegate the execution to the timeout
// so at the end, it will be triggered after the delay or
//loading time, in case it longer than desired delay
jQuery(window).load(function(){
  loaded = true;
  if(delayed){
    fadeLoader();
  }
});

Inside comments is the roughly explanation about how it works

edited Nov 22, 2013 at 0:40

answered Nov 21, 2013 at 15:51

pixshatterer

1,0397 silver badges12 bronze badges

3 Comments

TheOne Over a year ago

Sorry to say this didn't work! It doesn't seem to be running the fadeLoader() as the loading screen doesn't fadeout.

TheOne Over a year ago

I found swapping the if statements around worked... delayed = true; if(delayed){ fadeLoader(); } /////// AND /////// loaded = true; if(loaded){ fadeLoader(); }

pixshatterer Over a year ago

@LeviCole if you do that, delegation will not work at all, since it will fade instantly if page loaded, ignoring the timeout beating the purpose of what you want to do. It didn't work? weird... I tested it here locally and it worked with some html used as demo...can you post some html of what you have tested?

Collectives™ on Stack Overflow

jQuery loading screen with minimum viewing time

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related