Welcome Loading ... Page with Jquery

Question

How can I implement a welcome screen for 5 seconds giving information like Loading application ... + some application infos...while the main page loads in background.

Answer 1

just for anyone in the future who finds this, i found a more elegant solution that works.

http://www.jnorton.co.uk/blog/jquery-check-if-all-content-has-been-loaded

here is how i used it:

$(document).ready(function(){
    $(window).load(function() {$("#welcome").fadeOut('fast'); })
});

Answer 2

Unless you are actually using that time in the background to actually do some sort of preloading, I would highly suggest against this coming from an end-user perspective. I personally would find it annoying that when going to a website, I would have to sit through some sort of introduction before actually getting to the content I want.

This is why I tend to hate websites designed in Flash or those that simply incorporate a Flash splash page.

Edit: I don't necessarily think the main page's load should qualify for much on the "preloading" scale, unless it is resource intensive. Again, these are just my opinions.

Edit #2: It could also be argued that visitors to your website will make their decision on whether to stay or go based on as little as five seconds. Remember that those using the internet tend to have the attention spans of fruit flies, and putting them into a holding pattern before they actually get to the content is a good way to lose those users.

Answer 3

I think it is acceptable to have a 'loading ...' page in some cases - for example, after a user to a business application logs in (think TurboTax online ... it says something like 'establishing a secure connection', which is probably not exactly true, but loading interface stuff). Showing the page every time an anonymous user goes to your site is probably not the best idea.

Take a look at jQuery BlockUI. It is flexible and can do what you are talking about.

Answer 4

You would show your welcome message as the page loads (theoretically as an absolutely positioned overlay). You could then use jQuery to kick off a timer:

$(document).ready(function(){
    setTimeout(function(){
        $('div#overlay').fadeOut();
    }, 5000);
});