iphone - White page when loading while using jQuery Mobile -
we're using jquery mobile 1.3.2 mobile html5 app @ www.tekiki.com. (check iphone, or check www.tekiki.com/dandy/dandy desktop.)
upon loading, jqm shows white page between loading screen , first page of app. there settings in jqm repress loading screen? closest found $.mobile.loading()
, pertains loading text. want whole white screen vanish, meaning app should go directly loading screen first page.
the white screen talking results class declared in jqm css:
/*fouc*/ .ui-mobile-rendering > * { visibility: hidden; }
the class added when jqm begins initalize
// add mobile, initial load "rendering" classes docel $html.addclass( "ui-mobile ui-mobile-rendering" );
and removed on first pageshow
.
the whole procedure necessary, because otherwise see pre-enhanced markup until jqm done rendering it. if want "remove" it, declare:
.ui-mobile-rendering > * { visibility: visible; }
but see source code being touched jquery mobile.
workarounds know:
supply pre-enhanced markup instead of jqm doing it
kind of ordeal before jqm 1.4 (where have fewer generated elements , option tell jqm, widgets being provided pre-enhanced), can done nevertheless albeit requiring widget rewriting.
also see in code, problem should be, ios startup image disappears when wants (= before jqm initialized) vs. having control on , hiding when jqm done.
so: use other means of coverup custom startup screen
example, i'm doing this or this. both applications loaded requirejs , use custom startup script wrote (after pulling hair out ios startup images).
here how works:
- add class of
splash
body.css:before
full white background (...loading) - add optional background image via css or javascript (no jquery or jqm, because must run before either parsed)
- remove
splash
on pageshow body. stay on page loaded first (unless userel="external"
,body
persists, can safely add class pages , run coverup on first page user loads.
this hides whatever startup screen set when jqm done, not have white screen. plus works cross-browser (vs ios startup image) , can used different image sizes (try 2nd application different devices & portait/landscape).
if want full code sample, let me know.
Comments
Post a Comment