VR Course Contest
Show us your best virtual reality course and win $50 gift card and a winner badge!
CHECK IT OUT
Pre-loading?

djumeau
Community Member Posts: 18 ♪ 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
0
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.0 -
Hey David! Did you find any great solutions for this?
Hey Wendy!!0 -
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.
~Math0 -
This is very interesting Matt! I will have a look at this.
Regards,
David0
Categories
- 4.4K All Categories
- 35 ✫ Announcements
- 6 ✪ Contests
- 34.1K eLearning Brothers® Products
- 102 Lectora®
- 1.1K Lectora Discussions
- 1.9K Lectora Feature Requests
- 53 Lectora User Groups
- 2 AssetLibrary™
- AssetLibrary Discussions
- 2 AssetLibrary Feature Requests
- 69 CenarioVR®
- 111 CenarioVR Discussions
- 78 CenarioVR Feature Requests
- 2 Rockstar Learning Platform®
- 1 Rockstar Learning Platform Discussions
- 1 Rockstar Learning Platform Feature Requests
- 4 Off-the-Shelf Course Library
- 3 Off-the-Shelf Course Library Discussions
- 1 Off-the-Shelf Course Library Feature Requests
- 1 CourseMill®
- 101 CourseMill Discussions
- ReviewLink®
- 21 ReviewLink Discussions
- 12 ReviewLink Suggestions
- 1 The Training Arcade®
- 1 The Training Arcade Discussions
- The Training Arcade Feature Requests
- 7 Additional Learning Products
- 2 Adobe®
- 2 Articulate®
- 1 Camtasia®
- Docebo®
- 1 iSpring®
- 1 Microsoft® PowerPoint®
- 293 All Things eLearning
- 3 Course Development Showcase
- 1 eLearning Brothers® Downloads
- 1 Compliance Training
- 5 eLearning Development
- eLearning Game Design
- 7 Instructional Design
- 266 Learning Management System (LMS) Integration
- 2 Mobile Learning
- 2 Visual Design
- 319 Web Accessibility
- 579 ♪ The Green Room
- 3 ♡ Community Feedback
- 6 Community Tips