load-screen for some platforms?

edited March 2012 in General
I notice particularly on PlayBook and Android, that when I load my Enyo apps, it starts off with a blank white screen for a while, presumably while the Enyo stuff is being loaded by webKit. I tried adding some HTML to the body, but all that did was completely screw up the app rendering (using renderInto(body)) .. anyone have any ideas on ways to display something while Enyo is starting up?

Comments

  • I would expect that anything you put in the body tag would be replaced by the Enyo-rendered objects. Can you talk more about how it messed up?
  • edited March 2012
    Well, normally I load the Enyo scripts in a script tag in Head. To get the body to actually render before loading Enyo, seemed to require moving the enyo load into the body, after the things wanting to render. Placing the Enyo load in body instead of head results in .. chaos.

    image

    That's normally a sliding-pane Enyo 1.0 view.

    If I don't move the Enyo load into the body, then the things in the body don't render at all.
  • Maybe try having a CSS background image for the body. You'll need the CSS in the head of your index.html, and you'll need to remove the image (preferably by changing or removing a class name from the body) when Enyo is loaded.
  • Yeah, a tag in the head will block processing of the body... however, Enyo needs to be in the head for the package.js processing to work. I'd make sure you use the minimized version -- it has much fewer page loads and is faster for the JS engine to parse.

    Using a CSS background image sounds like the best idea. Just load that CSS early before any other CSS inclusions.
  • hmm. I thought that was a brilliant idea, but it's not even rendering the body while it's loading the scripts Even setting "body: { background: black; }" in the style of the body, doesn't set it until after enyo is done loading, when it briefly flashes black, then the enyo controls take over. I'll ping some PhoneGap people and see what else we can come up with too. and i'm always using the minimized scripts ..
  • edited April 2012
    hmm. this works a little bit, still see a white screen for a while on PlayBook .. doesn't do anything on Android



  • Did adding the same style attribute to the body tag do anything?
  • Same code on body tag gives an instant flash to black before Enyo takes over. Also not sure how to undo this on the html tag, after it starts, as document.html and window.document.html don't seem to be available .. not that this works well anyway.

  • What about putting the code in a stylesheet, and putting the tag above enyo?
  • I had a similar problem. Things looked funny at first before looking correct. I solved by hiding my enyo kind, and once the page loaded, show everything and render.
  • To access to HTML node, try document.getElementsByTagName('html')[0]
  • I am just heading back to Enyo development after doing some work on the original Palm Pre and am having the exact same issue with the white screen during loading.

    Dukiedrew can you elaborate on how you are hiding and showing your enyo kind?
  • edited August 2012
    Doesn't phonegap have a spashscreen option to it? They use it by default in wp7 but you have to include it in android.
  • edited August 2012
    I tried it out on Android and it worked fine. See here : http://simonmacdonald.blogspot.com/2012/04/phonegap-android-splashscreen-just-got.html

    I put the hide() function for the spashscreen in my apps main kinds rendered function.
  • Good find. I do need to work on upgrading my phonegap at some point, I was using 1.3.0 when I got started with it, and since it was kind of a bear to get going properly, I haven't messed with trying to change it.
  • Upgrading to 1.9 should be easy. 2.0 is more of a challenge but not much.
  • Why does this happen? It happens on every platform on which my app actually requires time to load.

    webOS
    Android
    Blackberry

    Only ones I've tested on.

    Two of those aren't even using phonegap so that is not the issue.
  • The browser doesn't do any rendering during the time it's loading and running script code on startup, and the standard Enyo loader tends to take some time to go through those files, especially in a debug build where you're loading lots of files.

    One solution is to asyncronously load the Enyo code, but that only really works for a minified application where you can just use async script tags (or put them at the end of your index.html file). If you have to use package.js files, those can currently only be processed in the head part of the HTML page, since they use document.write to add new script and link tags.
  • I have this issue with an app but it's dependent on the version of Android it's running on, with 2.3 its fine but on ICS I get the white page, really irritating.
Sign In or Register to comment.