Pre-loading?

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
I am looking for something like on CodePen.
Just wondering if there is a best practice?
Thanks,
David
Comments
-
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. -
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
Categories
- 35.9K All Categories
- 109 ✫ Announcements
- 33.1K Lectora®
- 31.1K Lectora Discussions
- 29K Lectora Desktop
- 2K Lectora Online
- 2K Lectora Feature Requests
- 71 Lectora User Groups
- 36 Lectora Accessibility User Group (LAUG)
- 25 ELB Learning Content
- 25 ELB Learning Content Discussions
- 329 CenarioVR®
- 196 CenarioVR Discussions
- 133 CenarioVR Feature Requests
- 42 Rockstar Learning Platform®
- 39 Rockstar Learning Platform Discussions
- 108 CourseMill®
- 108 CourseMill Discussions
- 47 ReviewLink®
- 47 ReviewLink Discussions
- 7 The Training Arcade®
- 7 The Training Arcade Discussions
- 936 All Things eLearning
- 37 eLearning Development
- 546 Learning Management System (LMS) Integration
- 333 Web Accessibility
- 1.2K ♪ The Green Room
- 9 Additional Learning Products