0 Replies Latest reply on Jan 23, 2017 7:21 AM by g.bollmann

    Lazy Load: solved

    g.bollmann Level 1

      I figured out REAL LazyLoad for Edge Animate. If you need deferred loading, you have probably looked high and low like me. If you are making a Hybrid app, you know the terrible impression that loading 300 images leaves with your users. Most likely they'll think it's broken.  I offer this hack to everyone, despite the risks and possible complications involved, because ...well... the software is on the outs anyhow and if you are like me you are desperate and just need to get a project finished. Below I also outline my other performance improvements for hybrid app efficiency. Note: I do not use scrolling, so visit the JQLazy website to do scroll-triggered lazy loading.

       

       

      Me: logically advanced designer. I can dissect code examples from other people and translate into what I'm doing.

       

      Suitable for: a large project with lots of images.

       

      Caveat: I suspect this is an all-or-nothing kind of thing. Don't expect to leave some to load on their own. Maybe you can get around it with the preloader? I just don't know. I do not have anything but images. No video, audio, etc. No preloader.  This will leave some things perhaps unreachable. I can't vouch for anything. Use at your own risk.

       

       

      1) I used the very well documented JQuery Lazy script from Eisbehr Daniel Kern. Thanks Daniel! It depends on JQuery, but I already included JQuery in my AE project, so no problem. (Other LazyLoad scripts have no dependencies. For instance, bLazy.)

       

      2) I edited (gulp) the edge.6.0.0.min.js found in the "edge_includes" folder of the project. I viewed the unminified previous version for reference.

      Why?!

      Because no matter what you do, AE "injects" the HTML into the final form at the very last moment based on the various settings you create in the UI. In other words, you never have a chance to get between AE and the HTML. Your HTML is actually calculated by the javascript in that file. You can't sidestep it. You can only have THAT file inject the jpg into a different attribute. And that's what I did.

       

      There is a "publish to static HTML" option. It creates an editable reference in the HTML, but it does not stop the accompanying javascript file from identifying (facepalm) the exact path. Check out the file definitions.   Var im = 'images/'   then later it says  im+"myImage.jpg"   and elsewhere says something like g3234="myImages.jpg". You can't beat the system.

       

      Result: the AE runtime will inject the image path into HTML using "data-src" as the image path attribute rather than "src". This means from the very start these images are invisible to the browser. This is the essence of all LazyLoaders. (The data- preface means it's a custom field.)

       

       

       

      Instructions

      • Give *ALL* your project images a class such as  lazyFirst  lazySecond lazyThird. I use 7 classes, because I load in chunks.
      • Open the edge.6.0.0.min.js file in a text editor. I use TextWrangler.

           On line 84, the following edits must be made...  (orientation points) (code) (changes)

       

           original

      bottom:{f:"rect",i:5,u:"px"},src:{o:"img",f:"fill",i:1,a:1,p:1,x:{apply:function(a,b,c,g){b=g?g._getFullURL(b):b;a.attr ("src",b)}}},poster:

       

      new

      bottom:{f:"rect",i:5,u:"px"},srcd:{o:"img",f:"fill",i:1,a:1,p:1,x:{apply:function(a,b,c,g){a.attr("src","data:image/png ;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=")}}},src:{o:"img",f:"fill",i:1,a:1,p:1,x:{apply:function(a,b,c,g){b=g?g._getFullURL(b):b;a.attr ("data-src",b)}}},poster:

       

       

      • Note: addition of "srcd"

               I hardcoded a single empty pixel image as the source. A base64 image does not need a call to the image folder. It's just an empty pixel. Therefore I left out the argument about creating the variable "b" and I just hardcoded that base64 as b.  In this bit of code I did not simply copy the original bit, and that is why. I named it srcd in case src was reserved. I tried it, it worked for me, I kept it.

                Don't want it? Use:

                bottom:{f:"rect",i:5,u:"px"},src:{o:"img",f:"fill",i:1,a:1,p:1,x:{apply:function(a,b,c,g){b=g?g._getFullURL(b):b;a.attr ("data-src",b)}}},poster:

       

      • Note: universally applied!!

           You can see that *ALL* image references created by the file will now come out with the data-src attribute. You can't get around this. It's all or nothing. I immediately load the few initial images using the LazyLoad delay: 0 argument.

       

      • Make several copies of that file for ease of use. Everytime you resave the .AN file, it will overwrite your edits. Before testing/publishing you will need to swap in the edited file again.

       

      • Using the code panel, upload the JQuery Lazy file into your project. I think it should be last.

       

      • In the places you want to trigger the load of a selector (such as select by class ".myClass" or select by id "pictureID"), put this code:

      You will need to include the event attribute of Lazy. Even compositionReady is an event, apparently. Whether in the compositionReady, a click or a swipe, add:

      sym.$(".lazyFirst").lazy({

        bind: "event",

        delay: 0,

        autoDestroy: "true"

        });

       

      I set autoDestroy of the instance (everytime you write it, an instance is created. They are individual.) just in case. Once they are on, they are on. Maybe it saves memory or time. Dunno.

       

      In other areas I added a delay timer with a nice fade-in effect:

      sym.$(".lazyNO").lazy({

        bind: "event",

        delay: 5000,

        effect: "fadeIn",

        effectTime: 1000,

        threshold: 0,

        autoDestroy: "true"

        });

       

      I think you can add the following argument into Lazy if you do not want to add the hardcoded empty pixel as above:

      defaultImage: "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",

       

      • Save your .AN file. NOTE: every time you save the AN file it will overwrite your edits. Keep a spare to the side.
      • Before previewing or packing your file for elsewhere, swap in your edited file into the package.

       

      • For every class, include such as this in the html. Use the min-height. It needs a height.

      img.lazyFirst {

              min-width: 5px;

              min-height: 5px;

              display: block;

                }

       

      Resulting HTML as created by the edited JS file:

      Note: it says class here, which is apparently the class from AN point of view because it is not MY class ".lazyFirst". AE calls my classes "userClass". I can't explain this ... Ignored it because my selectors worked with JQuery Lazy anyway. Best not to look.

      Screen Shot 2017-01-20 at 15.37.03.png

      Note: src is a hardcoded empty pixel. The real image is in the data-src attribute and therefore invisible from the start.

       

      Tip: Don't see your image?

      It seems "just gone"? Remember, an empty pixel is the source, so no "missing picture" icon will be displayed. Most likely, that particular image is not classed as "lazyFirst" or whatever you picked. If not, it can't be picked up by the Lazy selector script, and only the empty pixel can be displayed.

       

      General Tips to improve loading:

      • Turn off sections of code that are immediately unnecessary, then surreptitiously load them with some other button. "Turn it on in chunks." I accomplish this by putting code in the creationComplete of important symbols. Important symbols keep their own variables and code in my setup.
      • NOTE: doing the above will NOT turn off loading the images into the webkit browser (hybrid app is displayed in a webkit browser).
      • Turn off Autoplay of all symbols including the stage. If your symbol needs to return to the beginning to reset, at the end of the animation set a trigger "sym.stop(0);"
      • You need an empty pixel. Otherwise upon load the browser stumbles a bit before coming back with "missing image" icon. Takes time.
      • Beware what you put in the creationComplete of a symbol (also in compositionReady) because that code will be run BEFORE you see the first thing onscreen. Any time spent loading the code is time your user has to wait. Test and adjust exactly what MUST be there, and move out what does not.