3. The styling loads a bit slow when the app loads the second time!

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

The styling loads a bit slow when the app loads the second time!

  • J

    Hell,

    I’ve created an app and everythign works absolutely fine.

    However, when I load my APP and then play around with it and then close it and re-open it, it looks like the styling (css stuff) loads a bit slow or something in that relation because I see the html page (index.html) without any styling for a second or 2 and then everything goes back to normal!

    This issue only happens if I load the app the second time i load the app. I assume that this happens all the time but the first time I load my APP, there is my splashscreen which displays for 10 seconds which allows my entire html page including all the js and css files to load properly thus I won’t see the un-styled app/page but the second time I load the app, I don’t see the splashscreen and the first thing I see is the main page of the app (inde.html) and as I said above, it is un-styled for a second or two!

    I hope that makes sense.

    Has anyone encountered this issue and what are the solutions for this?

    Thanks in advance.

    0

  • Hi. Well you could always make a splashscreen and hide it when everything is loaded. I suspect the splashscreen which you see the first time might be something more OS/App related - you can make a second one (you can prob make it look the same as the first one), however this one will be from the app code itself.

    So something like

    <div id="splash"></div>

    #splash {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9001;
  background: url("path/to/splash") #999;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

    And then something like:

    ons.ready(function(){
  document.getElementById('splash').style.opacity = 0;
});

    I added some opacity transitions etc - if you want you can simply do document.getElementById('splash').style.display = 'none'; and ignore the last 3 css lines.

    Also make sure to add the splash at the root of the app. If you want you could also even inline the styles for it if you’re scared they could fail to load on time.

    That being said if you or anyone else finds a better solution for this feel free to write it here :)

    1