Well let’s assume you’ve a <div> and like to load a .swf flash file into it. We suppose you’re using swfobject or any other library or even if you don’t use library that should be a simple thing to do.

But what happens if the <div> has the style property “display:none”. Than unfortunately the flash file does not load. You get the file from the server, but when you set the <div> to be “display:block”-ed the flash starts the play from the very beggining.

Actually that’s supposed to be default action. In fact the workaround is like so. You put the <div>, not to be hidden with that “display:none”, but to be with 0px width and height. something like that:

<div style=”width:0px;height:0px;overflow:hidden;”></div>

The overflow is important – cause you’d like to load the swf file into the <div> and if the swfobject.crateSWF or embedSWF is with 100% width and height, the flash will result with zero height and zero width.

So you may put the flash to load in something like that:

<div style=”width:800px;height:600px;”></div>

and put that one into the div with overflow hidden. Than the outer <div> will be ivisible but present to the page and the inner one will be with fixed width and height.

Now when the flash loads, or if the user clicks on some part of the page or fires some event, you can simply reset the width and height of the outer <div>. The resulting piece of code will look like:

<div style=”width:800px;height:600px;overflow:hidden;”>

<div style=”width:800px;height:600px;”> the flash goes here with 100% width and height </div>

</div>

With jQuery that should look as follows:

$(document).ready(function() {

$(‘#outer-div’).css({ width: ‘800px’, height : ‘600px’ });

});

Now you can load the flash in background, even you can start loading it after everything else is loaded – i.e. on document ready event of jQuery, so if you have havy computations in that flash you can simple show something else to the user till the flash loads.