Jquery – How to capture an event trigger when a flash movie successfully loaded

embedflashjquerypreloaderswfobject

I'm currently using jQuery, as well as swfObject to dynamically embed the swf movie into my web page.

I currently having a problem on embeding immem's music player into my web page, as their embed code doesn't have any loading screen. So, when I replace the element using swfObject, that area will generally blank. In worst case, it means that user won't know that the embed song is loading.

So, I'm trying to find out the way to bind an event after that flash got loaded. Since my plan would be placing image with huge z-index on the top and use this trigger to hide the image. I think I've tried to use $('#embed').load(function(){ ... });, with no luck.

Does somebody have any solution for this? I just wonder if that is possible, since I don't want to get hacking with the flash and try to add 'loader' to the flash file.

Some more note: To make it more clear, I want to embed imeem's music player into my webpage. So, I really don't have any control over the flash file, i.e. I can't create a flash file by myself.

Best Answer

Typically the easiest thing to do is plain ol' <body onload="..." which would wait for your external resources to finish loading before calling your handler.

However, if you're using swfObject to add an embedded plugin dynamically the browser will fire the onload for the body exclusive of your flash movie (it doesn't know anything about your plugin).

See http://blog.deconcept.com/swfobject/forum/discussion/271/javascript-onload-event-does-not-reflect-page-load-using-swfobject/ for a similar discussion to yours. It's my best guess that you cannot do what you want without modifying the original swf in some fashion.

Related Topic