Flash SWF not initializing until visible - can I f

Question

I have an application that needs to render about 100 flash graphs (as well as other DOM stuff) in a series of rows that vertically extend many times beyond the current visible window - in other words, the users have to scroll down see see all the different graphs.

This application is also dynamic and when a user changes a value in the DOM (anywhere on the page) it will need to propagate that change to all the Flash graphs at the same time.

So I setup all the externalInterface callbacks and was careful to not let any JS start going until the ever-so-important "flashIsReady" call and...it worked great until I tried to update() the existing swf's with new data.

Here was the behavior: - All the swfs load (initially) in both IE/Fox = good. - Updating swfs with new content works in IE but not in Fox = not good - Updating swfs with new content works in Fox --ONLY IF-- I scrolled down to the bottom of the page, then back to the top -- BEFORE -- I triggered an update().

So then I started tracing out each time a swf called the JS to say "flash is ready" and I realized, Firfox only renders swfs as they become visible. And To be honest - that's fine and actually, I am pretty sure that IE does this too. But the problem is that not only does Firefox not initialize the swf, Firefox doesn't even acknowledge the swf exists (expect for after onload) if it has not yet been visible.

And the proof is that you get JS errors saying:

"[FlashDOMID].FlashMethod is not a function".

However, scroll down a little, wait until its visible and suddenly the trace starts lighting up

"Flash Ready", "Flash Ready", "Flash Ready" and once they are all ready, everything works fine.

Someone told me that FF does not init swf's until visible - can I force it? I can post code if you need...but its pretty heavy (hard to strip out the relevant from the rest) and I would like to avoid it (for your sakes) if possible.

The question is simple - have you had this happen and if so, did you find a solution? Does anyone now how to force a not-yet-visible swf to initialize? Thanks guys.

Answer 1

So...

After a lot of forum searching - I agree, there is no graceful way to do this haha! The solution I ended up going for was basically to make JS objects for each swf on $(document).ready()

Basically, the JS object would have various values, among them "data" and "isReady". When a swf became visible and would call the JS to say "im ready" I would simply catch that call, then find the JS object it was referring to (I managed to do this by passing the DOM id for each swf as one of its flashVars; yes it made me feel dirty). From there it was basically just a game to make sure that the each JS had "isReady" before I tried manipulating it.

The only bit of elegance in this whole mess was that by using JS objects, I could still apply new data to "hidden" swfs by simply updating the "data" property in their respective JS objects. Then, when a swf finally became visible, I would just update whatever data it had (ie, current data) and it worked pretty well but yeah, I still agree that this whole situation is unfortunate.

So... *answered.

Answer 2

I know this is probably a late answer.

But you need to change your wmode from opaque to wmode="window", that's why it's not working properly in firefox, IE doe the same thing, but only on the first page load.

Setting wmode to opaque causes firefox to not initialize the swf until it is viewed by the browser. However, this is not the same for all browers. IE only dose it on first page view, chrome and safari doesn't do it at all.

Unfortunately for me I found this question looking for the opposite. I'm attempting to make a player not initialize across ALL browsers until it is visible inside the browser.

Answer 3

i never really found a good way of forcing the load of the flash other than to reposition the elements after page init, forcing the load to start then hiding them again (cheap and nasty, but seems to work).

position all the flash elements towards the top left corner of the page (to make sure they are visible on page load) then use the pageLoad function in javascript to reposition the elements lower down the page as required. Jquery lets you do this all really quite easily with the addClass() and removeClass() functions