Addressing the Pre-Loader Issue

Thursday, February 11 2010 - Silverlight

A number of people left comments both here and at Channel 9 in response to my Pre-Loader / Splash Page post and show. Apparently people frequently run into an issue where when using a pre-loader, if the main app loads too quickly, neither app ends up loading correctly and the user is left with a blank white rectangle.

Well, I appear to have a solution for you all to try. This is one of those things that is notoriously difficult to test so I’m going to ask that those of you that have run into this issue help me test it.

Solution

The basics of the solution are to have a JavaScript function execute when the host page loads. Have that method wait a specified length of time (1/2 second seems to work) and then check to see if either the pre-loader or the main Silverlight application are loaded. If neither one is true then you are probably in the state people were describing. In that case you can use another JavaScript function to manually load the main Silverlight application.

Example

Lets take a look at the specifics of how this works.

Disclaimer: For this example I’ve included everything in the HTML page itself for expediency but all of the JavaScript could easily be moved to separate files.

Page Loaded:

There are a number of ways to execute a JavaScript function when the page loads, I’ll leave it to the reader to choose the method appropriate to their site. All I’ve done in this case (which is not when I’m recommending) is to just include a script block at the bottom of the page markup that calls the function as soon as the block is parsed.

<script type="text/javascript" >   1:     TestLoaded();
</script>

We’ll define the “TestLoaded” function shortly.

Set Pre-Loader status:

This is the exact function from my previous post, I’m just now also using the “started” variable to not only indicate if the animation has begun but also to indicate if the pre-loader itself is executing.

var started = false;

function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName("uxStatus").Text = "Loading: " + Math.round(eventArgs.progress * 100) + "%";
    sender.findName("uxProgressBar").Width = eventArgs.progress * 500;

    sender.findName("TeaserText").Text = teasers[Math.round(eventArgs.progress * 3)];

    if (!started) {
        started = true;
    }
}

Set Silverlight Loaded status:

Checking the Loaded status of the Silverlight application is another thing where there are numerous ways to accomplish but this is a simple one. All that is needed is to call a function when the plug-in loads as indicated by the param “onLoad”. In that function you can then flip a Boolean to true.

var slLoaded = false;
function pluginLoaded(sender, args) {
    slLoaded = true;
}

And:

<param name="onLoad" value="pluginLoaded" />

Check status:

Now that you have ways to see the status of each item, we need to check them. Below we define the “TestLoaded” function to call a second function when a set time has elapsed, 500 milliseconds in this case. The second function, “ReportStatus”, checks to see if either variable has been se tot true and if not, calls yet another method to create the Silverlight object and inject into the original container.

function TestLoaded() {
    window.setTimeout(ReportStatus, 500);
}

function ReportStatus() {
    if (started == false && slLoaded == false) {
        silverlightControlHost.innerHTML = embedSilverlight(null, "sl1", "row1");
    }
}

Inject Silverlight Application:

This snippet shows the usage of the “createObject” method which is included in Silverlight.js. This method has parameters to allow you to add any params or initparams to the object just as you would declare them in html.

function embedSilverlight(parentElement, pluginId, userContext) {
    var altHtml = pluginId == "sl1" ? null : "<!--not installed-->";
    return Silverlight.createObject("ClientBin/SplashScreenExample.xap",
        parentElement, pluginId,
        {
            width: "800", height: "500",
            background: "white", alt: altHtml,
            version: "3.0.40624.0", autoUpgrade: true
        },
        { onError: onSilverlightError, onLoad: pluginLoaded },
        "", userContext);
}

Finally

I know this post hasn't been very verbose but hopefully it will help you implement a solution to the non-loading Silverlight applications if you run into it. Below are links to a number of resources that are referenced or used in creating this solution.

Good luck and please let me know if this works for your situation.

Addressing the Pre-Loader Issue

Solution

Example

Disclaimer: For this example I’ve included everything in the HTML page itself for expediency but all of the JavaScript could easily be moved to separate files.

Finally

Links

Silverlight Links