How to show a preview image while Flash SWF is loading?

Question

I have some 3rd party Flash SWFs on my site that are up to 100KB in size. e.g. the Flash video player "JWPlayer" SWF is 98KB.

That's fine for people with Broadband, but not so good for the slow dial up bandwidth visitors. e.g at 40 kbits/s, we're talking 20 seconds to download.

The problem is that on slow connections, all the visitors are seeing is a static white screen, and so may close the page thinking it's dead. If I right click the area where the SWF is to go, an Adobe Flash Player Object is occupying the space, but the 3rd party SWF has not finished loading in yet.

I would like the website visitors to see a loading spinner GIF or something similar.

Unfortunately, none of the 3rd party SWFs have "preloader" element. And they are not open source, so I cannot add a preloader to them.

So, my question is...

Is there any way to display a loading image, prefereably a GIF animation, while the SWF is loading?

For example, is there any way to force the Adobe Flash Player to show an image while it is loading in the SWF?

I don't have any Flash coding skills, so a solution that doesn't include creating an extra SWF or a SWF within a SWF would, probably isn't best for me, but might be worth adding to the post in case other people have a similar problem.

I am using swfobject 2.2 to embed the SWFs, so a solution that takes that into account or at least doesn't break that would help.

Thanks very much for taking the time to read my post, even if you can't help.

Dave

I thought about using jquery to add the image using a CSS z-index in front of the Flash object, then use the swfobject callbackFunction to remove it once the SWF has loaded. I have done this in the past to put a Logo in front of the SWF. But this involved playing around with the "wmode" parameter of the flash object, & there were issues that may or may not have been resolved to do with Flash and the wmode parameter. I don't recall if the issue was to do with what the Flash version, or what browser, but it was enough to stop me using this method. — David

Chazbot Chazbot · Accepted Answer · 2011-08-14T21:23:44

Without knowing which 3rd party swfs you're using it could be tough, but here's a few things to think about:

One approach would be to hide the swf (or the div that the swf is inside) until it's loaded, and then reveal it once it's finished. You can have a spinner / loading image sit in it's place in the mean time. That said, what you really need is a javascript function that gets called once the load is complete. Once this happens, you can use jQuery to .show() or .hide() your spinner and swf respectively.

JWPlayer has some events that you can make use of. It looks like onReady would do the trick for you.

As for the other 3rd party swfs, I'd look around their documentation for similar javascript callbacks. I know the swfobject has an onLoad callback, as do a few other embed solutions like Swiff, assuming you can use them.

Good luck!

EDIT: The swfobject's callback might be called when the swf has successfully been embedded not necessarily loaded. Your best bet is to play around with this and see if it works - or use the 3rd party swf's callback functions wherever possible.

EDIT 2: Here's a flash loader example.

import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;

function startLoad() {
    var mLoader:Loader = new Loader();
    var mRequest:URLRequest = new URLRequest("url-to-your-swf.swf");
    mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
    mLoader.load(mRequest);
}

function onCompleteHandler(loadEvent:Event){
    addChild(loadEvent.currentTarget.content);
    //Here's where you specify your js function
    ExternalInterface.call("flashLoaded"); // <-- where 'flashloaded' is a js function

}

startLoad();

How to show a preview image while Flash SWF is loading?

2 Answers