Search code examples
jqueryiphonehtmljquery-mobilemobile-safari

White page when loading while using jQuery Mobile

We're using jQuery Mobile 1.3.2 for a mobile HTML5 app at www.tekiki.com. (Check from an iPhone, or check www.tekiki.com/dandy/dandy from a desktop.)

Upon loading, JQM shows a white page between the loading screen and the first page of the app. Are there settings in JQM to repress the loading screen? The closest we found was $.mobile.loading(), but this only pertains to the loading text. We want the whole white screen to vanish, meaning the app should go directly from the loading screen to the first page.

Solution

  • The white screen you are talking about results from this class declared in JQM CSS:

    /*fouc*/
.ui-mobile-rendering > * { visibility: hidden; }

    The class is added when JQM begins to initalize

    // Add mobile, initial load "rendering" classes to docEl
$html.addClass( "ui-mobile ui-mobile-rendering" );

    and removed on the first pageshow.

    The whole procedure is necessary, because you would otherwise see the pre-enhanced markup until JQM is done rendering it. So if you want to "remove" it, you could declare:

     .ui-mobile-rendering > * { visibility: visible; }

    but you would see all your source code being touched up by jQuery Mobile.

    Workarounds I know:

    Supply pre-enhanced markup instead of JQM doing it
    This is kind of an ordeal before JQM 1.4 (where you will have much fewer generated elements and the option to tell JQM, which widgets are being provided pre-enhanced), but can be done nevertheless albeit requiring some widget rewriting.

    Also from what I see in your code, your problem should be, that the iOS startup image disappears when it wants (= before JQM is initialized) vs. you having control over it and hiding it when JQM is done.

    So: Use some other means of coverup like a custom startup screen
    For example, I'm doing this or this. Both applications are loaded with requireJS and use a custom startup script I wrote (after pulling my hair out with iOS startup images).

    Here is how it works:

    • add a class of splash to the body. CSS:before a full white background (...loading)
    • add optional background image via CSS or Javascript (no jQuery or JQM, because it must run before either is parsed)
    • remove splash on pageshow from the body. As you always stay on the page you loaded first (unless you use rel="external", the body persists, so you can safely add the class to all your pages and it will only run the coverup on the first page the user loads.

    This hides whatever startup screen you set when JQM is done, so you will not have a white screen. Plus it works cross-browser (vs iOS startup image) and can easily be used with different image sizes (try the 2nd application with different devices & portait/landscape).

    If you want a full code sample, let me know.