Preload Module

nwilliams3743
nwilliams3743 Community Member Posts: 74
Is there a way to prevent the learner from starting the module until the whole module has preloaded?

Or even 50% loaded? Having some real lag issues which is really impacting the learning experience.

The scorm .zip file is 42mb

I came across this http://www.swiftelearningservices.com/how-to-create-a-custom-preloader-in-lectora/ however it is missing the .css file it refers to, and I'm not entirely sure it actually defines when a module is completely loaded.

If this cannot be achieved, do most recommend having all items set to preload or not to enhance the speed of the module?

Thanks

Comments

  • bmazy6337
    bmazy6337 Community Member Posts: 22
    I'm also wanting a solution for a preloader!!! Any luck with that yet Nick?
  • carlfink
    carlfink Community Member Posts: 971 ✭ Legend ✭
    With Flash no longer recommended or really supported, preloading entire modules is largely off the table. You can preload major components by some trickery, but that's about it, as far as I know.

    We have some pretty bad network speeds in some of our locations, and the only real solution seems to be "Don't use large components." That is, provide non-video, maybe even non-video and non-audio alternatives.
  • bmazy6337
    bmazy6337 Community Member Posts: 22
    I had found this site

    https://www.swiftelearningservices.com/how-to-create-a-custom-preloader-in-lectora/

    and at first, it seemed to work. However, after doing some testing I can see that the way at least I have it set up, it's not. :(

    Here is a link to the game, I'm working on. Images and audio are not compressed so I could test it.

    www.texasceu.com/examples/game/

    Note: I've just started this project so the orange buttons at the bottom are placeholders. I've stripped it down to try to resolve this preloading issue.

    After looking at the site I got the preloader from, it appears it works on their demos, so I'm just not seeing something I guess!! :(  So close!!!

    Any advice would be appreciated!!!

     
  • bmazy6337
    bmazy6337 Community Member Posts: 22
    Hey Nick,

    Mine has the .css file.. Here is the contents of it! It will not let me upload a .css file for security reasons!! Hope it helps!! :)

     

     

    #preloaderhtml {
    z-index: 100000 !important;
    opacity:1;
    }
    .preloader {
    width: 1009px;
    height: 662px;
    background-color: #5b6a6f;
    padding-top: 231px;
    }
    @-webkit-keyframes uil-default-anim {
    0% {
    opacity: 1
    }
    100% {
    opacity: 0
    }
    }

    @keyframes uil-default-anim {
    0% {
    opacity: 1
    }
    100% {
    opacity: 0
    }
    }

    .uil-default-css > div:nth-of-type(1) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    margin: auto;
    }

    .uil-default-css > div:nth-of-type(2) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.4166666666666667s;
    animation-delay: -0.4166666666666667s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(3) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.33333333333333337s;
    animation-delay: -0.33333333333333337s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(4) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(5) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.16666666666666669s;
    animation-delay: -0.16666666666666669s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(6) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.08333333333333331s;
    animation-delay: -0.08333333333333331s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(7) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(8) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.08333333333333337s;
    animation-delay: 0.08333333333333337s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(9) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.16666666666666663s;
    animation-delay: 0.16666666666666663s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(10) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(11) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.33333333333333337s;
    animation-delay: 0.33333333333333337s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(12) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.41666666666666663s;
    animation-delay: 0.41666666666666663s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }
  • prg1792
    prg1792 Community Member Posts: 43 ♪ Opening Act ♪
    To be clear, the "preloader" described on that site it just an HTML implementation of an animated "loading" image. It does not actually preload any images; it just covers the screen for a set amount of time giving the rest of the page components additional time to load before the cover fades away. This cover would still appear on the next visit to the page, when the visuals would already be cached. Probably not an ideal user experience.
  • carlfink
    carlfink Community Member Posts: 971 ✭ Legend ✭
    To force a preload, you could in principle have every graphic, video, sound, and script loaded at the course or lesson level, but invisible because off-screen (out of the viewport). Then on each page, Actions move the graphics and whatnot to their proper position. It would be a lot of work and probably not worth it, but maybe if you have only a few very large items that are causing the problem you could try this for just them.
  • bmazy6337
    bmazy6337 Community Member Posts: 22
    Thanks Ann!!!!

    Thanks CarlFink!!

     

    I see what you guys are talking about!!! Thanks for the posts!!

    I can compress my data about 85% so I hope that will be good enough for most users!!

    :)

    B