13 Replies Latest reply on Feb 22, 2014 3:11 AM by uditb

    Preloading race condition with slow connections

    pete_otaqui

      Hi,

       

      I have an Adobe Edge composition with a fair amount of animation - the compressed *_edge.js file is 75kb compressed or 675kb uncompressed.

       

      If I load the default published index.html file with a cold cache on a slow connection (~80kbps) I invariably get a two fatal errors thrown.  Loading it up in a faster environment and everything works fine.

       

      Here is a dump of the errorsm including the stack trace:

       

      Uncaught ReferenceError: jQuery is not defined characters_edgeActions.js:52

      (anonymous function)characters_edgeActions.js:52

       

      Uncaught TypeError: Object #<Object> has no method 'okToLaunchComposition' characters_edgePreload.js:27

      edgeCallbackcharacters_edgePreload.js:27

        1. (anonymous function)characters_edgePreload.js:15
        2. tcharacters_edgePreload.js:11
        3. dcharacters_edgePreload.js:10
        4. I.b.onreadystatechange.b.onload

       

      As you can see, edgeActions is being called before jQuery has finished loading, which is obviously a problem with your preloading code.  Also the _edgePreload file is trying to complete before it's loaded the actual edge.1.5.0.min.js file.

       

      Here's Chrome's network panel (sorry I split the images so they didn't end up too tiny)

       

      adobe-edge-network-panel-1.pngadobe-edge-network-panel-2.png

       

      I'm going to be looking into this further, but thought I'd raise it with you.

       

      Many thanks,

       

      Pete

        • 1. Re: Preloading race condition with slow connections
          pete_otaqui Level 1

          OK, so I've at least got the thing loading and running.

           

          1. I edited the html file by adding <script> tags for the required files, rather than letting _edgePreload.js manage them
          2. I removed all but the smallest of the files to be preloaded from _edgePreload.js, so it's not loading things twice (except in one case), but still actually "fires"
          3. I added an extra <script> block to definitively identify jQuery as AdobeEdge._$, as soon as jQuery was loaded.

           

          This at first glance seems fairly reasonable in my setup, since this all fits into a project using requirejs, so I can just specify the files as dependencies.  I suspect the problem will be that the preloader is still very naïve in assuming that "onLoad" hasn't happened yet, and will probably be adding the event listener too late in the game.

           

          From here I can see two options:

           

          1. Patch _edgePreload.js so it will fire "docLoaded()" when it's loading is complete, even if that happens after onLoad has happened
          2. Keep with my current setup and don't try integrating with requirejs.

           

          Option 2 is probably unacceptable since it will create a lot of blocking files that will need to be loaded before the page is displayed.  I suppose I could move that block to the end of the file and concatenate them all together which would help somewhat.

           

          Anyway - I'd really appreciate some input from Adobe here

          • 2. Re: Preloading race condition with slow connections
            pete_otaqui Level 1

            I've done a bit more work here to integrate this with the rest of my RequireJs based loading routines.

             

            The basic steps are like this:

             

            1. Don't include any of the edge <script> tags in html, we're going to get RequireJS to load it for us
            2. Remove all-but-one (in my case "*_edgeActions.js") from the *_edgePreload.js file.  We need to leave one in there for it to fire
            3. Patch *_edgePreloads addEventListener code with a check to see if the document is already loaded, in which case don't add the listener but call onDocLoaded directly
            4. Add some RequireJs config so it knows how to manage your Edge Animate composition.

             

            This is the relevant parts of my html, where I'm defining an extra variable to check whether the dom has finished loading, forcing AdobeEdge.$_ to be my jQuery, and setting up "bootstrapLoading"

             

            <html>
            <head>
            ...
            <script type="text/javascript">var edge_alreadyLoaded = false;</script>...
            ...
            </head>
            <body>
            ....
            <script src="jquery.min.js"></script>
            <script type="text/javascript">var AdobeEdge = AdobeEdge || {}; AdobeEdge.$_ = jQuery; AdobeEdge.bootstrapLoading = true</script>
            <script data-main="main" src="require.js"></script>
            <script>edge_alreadyLoaded = true;</script>
            </body>
            </html>
            

             

            My main.js then has the following config:

            require.config({
              ...
              shim: {
                    edge: {
                        deps: ['jquery'],
                        exports: 'AdobeEdge'
                    },
                    characters_edge: {
                        deps: ['edge'],
                        exports: 'AdobeEdge'
                    },
                    characters_edgeActions: {
                        deps: ['characters_edge'],
                        exports: 'AdobeEdge'
                    },
                    characters_edgePreload: {
                        deps: ['characters_edgeActions'],
                        exports: 'AdobeEdge'
                    }
              }
            });
            

             

            I've also patched *_edgePreload.js by using my new variable to see if the dom will already be loaded, and I've also taken out all but one of the files it's preloading (I left in the smallest one) so that it "fires" correctly.

            ...
            if ( edge_alreadyLoaded ) { onDocLoaded(); } else if(document.addEventListener ){ 
               window.addEventListener("load", onDocLoaded, false);
            } else if ( document.attachEvent ) {
               window.attachEvent("onload", onDocLoaded );
            }
            ... 
            aLoader = ['characters_edgeActions.js;]
            

             

            The final piece is then to actually require() the edge stuff in one of your modules.  I've done it like this (note that I'd dealing with AdobeEdge immediately when this module is executed and not supplying any kind of facade:

            define(['characters_edgePreload'], function(AdobeEdge) {
                AdobeEdge.loadResources();
                AdobeEdge.playWhenReady();
                AdobeEdge.bootstrapCallback(function (comp_id) {
                    var stage = AdobeEdge.getComposition(comp_id).getStage();
                    // ... you can use stage now
                });
            });
            
            • 3. Re: Preloading race condition with slow connections
              Rick Meyers

              I'm seeing exactly the same problem loading any Edge composition over a slow connection. I agree that some help from Adobe is needed here.

              • 4. Re: Preloading race condition with slow connections
                pete_otaqui Level 1

                Since I was pointed to this forum as the closest thing to a bug tracker that Adobe is providing for Edge, I'm a bit disappointed at getting zero response on a pretty critical bug.  Even if it's just to be told "it works for us", I would have expected some kind of response.

                 

                Oh well, I guess either it is an edge-case (har har) or enough people will hit the problem if edge starts to take off.  Hopefully what I've put down here will get people up and running with a properly working setup until it's addressed properly.

                • 5. Re: Preloading race condition with slow connections
                  resdesign Adobe Community Professional & MVP

                  You'll probably get some input from the Adobe Team tomorrow since they are just voluntarily participating here and this is the weekend.

                  • 6. Re: Preloading race condition with slow connections
                    pete_otaqui Level 1

                    My first posts about this were about a month ago, so I'm dubious about that, but very happy to be proven wrong!

                    • 7. Re: Preloading race condition with slow connections
                      resdesign Adobe Community Professional & MVP

                      As a subscriber, I get a lots of emails for this forum and I miss some of them on a regular basis that I could answer. But as all the others I also have a regular job. So I am sure some fall through the cracks. I hope you will get an answer. I missed your posting the first time.

                      • 8. Re: Preloading race condition with slow connections
                        Rick Meyers Level 1

                        Edge Animation compositions often fail to load successfully over slow connections. As mentioned above, this looks like a race condition between the JavaScript files jquery-1.7.1.min.js, edge.1.5.0.min.js, xxxx_edge.js, and xxxx_edgeActions.js.

                         

                        The Adobe Edge Animate Showcase samples (Designer Spotlight, Cracidae Catch, Mobile Browser Marketshare, and Bubbleocity) all frequently fail to load over slow connections. You can find them here:

                         

                        html/adobe.com/edge/animate/showcase.html

                        html/adobe.com/edge/animate/showcase/timeline/timeline.html

                        html/adobe.com/edge/animate/showcase/catch/catch.html

                        html/adobe.com/edge/animate/showcase/mobilebrowser/mobile_marketshare.html

                        html/adobe.com/edge/animate/showcase/bubbles/bubbles.html

                         

                        Sometimes these pages load successfully, sometimes they don't. Errors will differ, but often include these two:

                         

                        ReferenceError: Can't find variable: jQuery

                        TypeError: "undefined' is not a function

                         

                        I get these errors running iOS 5 on an iPad over a 3G cell connection. I've also seen similar behavior using an iPhone 5 with iOS 6 over WiFi, but the errors are less frequent over faster connections.

                         

                        Any help from Adobe would certainly be appreciated. It's hard for us to recommend using Edge when Adobe's own samples don't work properly on the iPad and iPhone.

                        • 9. Re: Preloading race condition with slow connections
                          Rick Meyers Level 1

                          File xxxx_edgePreload.js sets

                               AdobeEdge.yepnope.errorTimeout=4E3;     // 4 seconds

                           

                          Replacing this with

                               AdobeEdge.yepnope.errorTimeout=60E3;   // 60 seconds

                           

                          will avoid these loading errors on slow connections in most cases.

                          • 10. Re: Preloading race condition with slow connections
                            jackaroo89

                            I've just had a similar problem and seem to have fixed it, although my site does not use requirejs.

                            It seems to be the loading of the file edge.x.x.x.min.js.

                            I was trying javascript workarounds for some time but found a simple solution:

                             

                            - Remove edge.x.x.x.min.js from the aLoader array in edgePreload.js

                            - Add edge.x.x.x.min.js script tag to the html BEFORE the edgePreload.

                             

                            I tested this down to 10kB/s (takes a long time to load but it works!) and it no longer throws the #<Object> has no method 'okToLaunchComposition' error.

                             

                            Adobe may or not have fixed this in CC (I'm using version 1.0) but we need to accommodate potentially slow load times on mobile platforms!

                            • 11. Re: Preloading race condition with slow connections
                              12orchards

                              Thanks! This worked for me. The load event timer in chromes web inspector was sometimes going up to 5-10 seconds, so I'm guessing the 4 second timeout was stopping things loading?

                               

                              I wonder how this will finally be resolved...??

                              • 12. Re: Preloading race condition with slow connections
                                sosnewmedia

                                Let's hope it will be resolved (hint hint Adobe) this one has been a real pain.

                                • 13. Re: Preloading race condition with slow connections
                                  uditb

                                  Doesn't seem to be working . Tried all options listed above. I'm testing my pages with Xat.com's Webspeed Simulator and pages break (animation does not load, even when I have set the bandwidth to 256kbps.

                                   

                                  Neither of the preloader options (immediate/polite) work.

                                   

                                  Some serious work is required, becuase in current shape, its nothing but pain.