Pre-loading?

djumeau
djumeau Community Member Posts: 17 ♪ Opening Act ♪
My visual elements (particularly heavier images) take time to render on my page. So sometimes, my visual elements appear random for the first time (since the images are not cached on the browser) and I apply animations (either the standard Lectora transitions, or using JavaScript [Greensock]). I was thinking if anyone had a method to cover everything on the page until all my visual assets have been loaded?

I am looking for something like on CodePen.

Just wondering if there is a best practice?

Thanks,

David

 

Comments

  • wendymiller
    wendymiller Community Member Posts: 238 ☆ Roadie ☆
    Hi David,

    This may not be a perfect solution, but it has worked for me in the past. When a client complained about elements seemingly becoming visible at random, I placed most of the content on a page into a group and set the group to be initially hidden. Then I placed a transparent graphic, button, or object with its opacity set to 0 at the bottom of the Title Explorer on that page (outside of the main content group). The transparent graphic would have an OnShow action with a 1 second delay that would then show the content group. Like I said, not perfect because of varying loading speeds, but may work in a pinch.
  • bmazy6337
    bmazy6337 Community Member Posts: 35 ♪ Opening Act ♪
    Hey David! Did you find any great solutions for this?

    Hey Wendy!!
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916 ☆ Roadie ☆
    Allthough not a complete fix for elements with a long loading time, i use this javascript on the start of pages atm. to get rid of the white flash ( when Trivantis implements the one-page-approach that offcourse is not necesscary anymore ) and with a little effort you could change it to show specific elements first and then others... Timelinemax would do great there...

    var curPage = $("body"); // uses jquery as selector
    TweenMax.set(curPage , { autoAlpha:0}); // set immediately sets a element to a specific value.
    TweenMax.to(curPage , 0.25, { autoAlpha:1}); // and then it shows/fades the page in 0.25 seconds

    On a nextButton i have this...to fade the page out:

    var curPage = $("body");
    function goNextPage() {
    trivNextPage();
    };
    TweenMax.to(curPage , 0.25, { autoAlpha:0,onComplete:goNextPage});

    The complete page first fades out completely in 0.25 seconds and the the Trivantis function to go to the nexpage is called....

    To get this working you need jQuery and GSAP Tweenmax.

    ~Math
  • djumeau
    djumeau Community Member Posts: 17 ♪ Opening Act ♪
    This is very interesting Matt! I will have a look at this.

    Regards,

    David