Pre-loading?

djumeau

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

 

wendymiller

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

Hey David! Did you find any great solutions for this?

Hey Wendy!!

mnotermans5114

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

This is very interesting Matt! I will have a look at this.

Regards,

David