CODEWITHSUNDEEP
javascriptjqueryflash
keithics
keithics

Reputation: 8758

preload swf with jquery / JS

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.

Upvotes: 10

Views: 9747

Answers (6)

Boris Gappov
Boris Gappov

Reputation: 2493

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

Upvotes: 0

Draykos
Draykos

Reputation: 822

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>

Upvotes: 1

user1419445
user1419445

Reputation:

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.

Upvotes: 6

Yitzhak
Yitzhak

Reputation: 561

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

  1. 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.

Upvotes: 2

Ahmed Nuaman
Ahmed Nuaman

Reputation: 13261

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

Upvotes: 0

Helmut Granda
Helmut Granda

Reputation: 4705

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

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

Upvotes: 0

Related Questions