javascript - preload swf with jqueryJS

I would like to preload the SWF before showing them to the user.

SWF are dynamic and I dont have the FLA files.

I would love to do it using Javascript or jquery if possible.

I would like to preload the SWF before showing them to the user.

SWF are dynamic and I dont have the FLA files.

I would love to do it using Javascript or jquery if possible.

Share Improve this question edited Nov 13, 2012 at 20:23 Sergey K. 25.4k14 gold badges111 silver badges175 bronze badges asked Aug 7, 2010 at 19:50 keithics 8,7582 gold badges51 silver badges35 bronze badges

1 Could you load the SWF into your own Flash loader that will take care of preloading and display it only once it's ready? The Flash script would be easy, I can help if you want. – daniel.sedlacek Commented Jan 7, 2011 at 17:54

Add a comment |

6 Answers 6

Sorted by: Reset to default 6 +500

Have a look at swfjsPreLoader:

This preloader accepts an array of assets (jpg,gif,png,swf) you would like to preload. Internally it will create an flash-application which does the preloading. You could define several callback handlers. So JavaScript gets to know when all assets are loaded or each single asset is loaded including SWF-files.

I don't know if you're still looking for answers, but here it is.

Create two divs inside your page. Give one an ID called loading, and another the id feature, and hide feature. Put your flash content inside feature, and make sure to hide feature with css display:none.

Then, at the top of your page, or wherever you do your onload stuff, do this:

            $(document).load('/path/to/your.swf', function() {
              $('#feature').slideDown(600);
              $('#loader').slideUp(300);
            });

And there you have it. Inside loading, you can put one of those happy little spinning wheel graphics. I'm sure there are more sophisticated things you can do with callbacks, but this will do the job of preloading.

Enjoy.

You can first load swf file via ajax and then add object to dom.
In this way, browser will use cache, swf is reloaded from cache and is immediately ready.

Follow a sample of what I'm saying (I cannot give you a fiddle sample because you need a local swf to be ajax loaded).
swfobject can be used in "loadObject" function for a better configuration of swf object.
"mySwfFunction" is called after swf is loaded. It can be removed if not needed.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Swf demo</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
    <style type='text/css'>
    </style>
    <script type='text/javascript'>
        $(window).load(function () {
            var loader = new 
    function () {

        var loadObject = function ($el, src, callback, width, height) {
            var d = document;
            var s = 'object';
            var obj = d.createElement(s);

            obj.type = 'application/x-shockwave-flash';
            if(width){
             obj.width = width.toString() + 'px';
            }
            obj.name = 'plugin';

            if(height){
             obj.height = height.toString() + 'px';
            }

            obj.data = src;
            $el[0].appendChild(obj);
        };


        this.loadSwf = function ($el, src, callback, width, height) {

          $.ajax({
            url: src,
            success: function (data) {
                loadObject($el, src, callback, width, height);
                if(callback) callback();
            },
            error: function (xhr) {
                //your error code
            }
          });

        };


        } ();

        var mySwfCallback = function()  {
            $('#mySwf').show();
        }

        var $el = $('#mySwf');
        var src = 'your_file_url.swf';
        loader.loadSwf($el, src, mySwfCallback, 300, 300);
    });
    </script>
</head>
<by>
    <div id='mySwf' style='display:none;' >
    </div>
</body>
</html>

Can you preload the whole page? If so here is an idea with jQuery:

http://www.gayadesign.com/scripts/queryLoader/

Personally I think it's best to use a Flash-based polite loader as this can be as little as 5kb. The code for it doesn't have to be that hard, something along the lines of:

package
{
    import com.firestartermedia.lib.as3.utils.DisplayObjectUtil;

    import flash.display.Sprite;
    import flash.events.Event;

    [SWF( backgroundColor=0xFFFFFF, frameRate=30, height=400, width=600 )]

    public class AppLoader extends Sprite
    {
        public function AppLoader()
        {
            loaderInfo.addEventListener( Event.INIT, handleInit );
        }

        private function handleInit(e:Event):void
        {
            loaderInfo.removeEventListener( Event.INIT, handleInit );

            DisplayObjectUtil.loadMovie( 'App.swf', null, handleComplete );
        }

        private function handleComplete(e:Event):void
        {
            removeChild( loader );

            addChild( e.target.content );
        }
    }
}

This uses the DisplayObjectUtil available on github: https://github.com/ahmednuaman/as3

Use another swf with preloader. Look here: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7de1.html

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - preload swf with jqueryJS - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)