Showing a Splash Screen during script execution

Question

Hi,

I want to know how to show a splash screen (like a gif or jpeg file) on the user screen during my script execution.

Thank you for your help.

Answer 1

I don't know of an existing script, but I can tell you how you would go about implementing a splash screen.

I'm going to suggest using JQuery because that's what I've chosen as my JS library of choice, but the others are good as well.

First, in your JS method, you will want to show the popup. You can use the JQuery Dialog widget to accomplish this. In the same method, make your ajax call. Ajax by nature are asynchronous, so set up a method for when the call completes, and for when the call errors. In both of those methods, the first thing you should do is hide the modal popup.

Now, there's one last trick - you want to fail gracefully in unexpected circumstances, such as loss of connectivity. Therefore, when you show the dialogue, you will also want to setup a javascript timeout to handle any error cases, so that the dialogue isn't permanently shown. That method should just check to see if the dialogue is visible, and if so, hide it (and maybe show an error message).

I hope that is enough information to get you going. Even if you are new to JavaScript, this is a good project to learn from, as it shouldn't be too difficult.

Answer 2

The trick is to let the rendering re-paint after the splash display is enabled before coninuing with long running JS. To do that you can use the setTimeout method.

For example assuming you splash display is in a div with display style none you can use this function to run you code:-

function splash(splashDivId, fn)
{
    var splashDiv = document.getElementById(splashDivId)
    splashDiv.style.display = "block";
    setTimeout(function() {
       fn()
       splashDiv.style.display = "none";
    }, 100);

}

Usage:-

splash("mySplashDiv", longRunner)

function longRunner()
{
    //This may take a while
}

Answer 3

Hi,

I use the jQuery blockUI plugin to accomplish what you described. Just have a look at the examples, it is highly customizable, has a tiny footprint and can perform wonders with simple little calls.