Pagina bianca durante il caricamento durante l'utilizzo di jQuery Mobile

Question

Usiamo jQuery Mobile 1.3.2 per un'applicazione mobile HTML5 allo www.tekiki.com. (Controllare da un iPhone o controllare www.tekiki.com/dandy/dandy da un desktop.)

Al caricamento, JQM mostra una pagina bianca tra la schermata di caricamento e la prima pagina dell'app. Ci sono impostazioni in JQM per reprimere la schermata di caricamento? Il più vicino che abbiamo trovato era $.mobile.loading(), ma questo riguarda solo il testo di caricamento. Vogliamo svanire l'intera schermata bianca, il che significa che l'app dovrebbe passare direttamente dalla schermata di caricamento alla prima pagina.

Answer 1

Lo schermo bianco si sta parlando dei risultati di questa classe dichiarata in jQm CSS:

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

La classe si aggiunge quando jQm comincia a inizializzare

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

e rimosso il prima pageshow.

L'intera procedura è necessaria, in quanto altrimenti si vedrebbe il markup pre-potenziato fino a quando JQM non avrà finito di renderlo. Quindi, se si vuole "remove", si potrebbe dichiarare:

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

ma si dovrebbe vedere tutto il codice sorgente di essere toccato da jQuery Mobile.

Soluzioni alternative so:

alimentazione marcatura pre-enhanced, invece di jQm farlo
Questa è una specie di un calvario prima jQm 1.4 (dove si avrà molto meno elementi e la possibilità di raccontare jQm generato , che i widget vengono forniti pre-potenziati), ma può essere fatto, anche se richiede la riscrittura di alcuni widget.

Anche da quello che vedo nel tuo codice, il tuo problema dovrebbe essere, che l'immagine di avvio di iOS scompaia quando vuole (= prima che JQM sia inizializzato) rispetto a te che hai il controllo su di esso e lo nascondi quando JQM è finito.

Quindi: utilizzare un altro mezzo di insabbiamento come una schermata di avvio personalizzata
Per esempio, io sto facendo this o this. Entrambe le applicazioni sono caricate con requireJS e usano uno script di avvio personalizzato che ho scritto (dopo aver tirato i capelli con le immagini di avvio di iOS).

Ecco come funziona:

• aggiungere una classe di splash al corpo. CSS:before uno sfondo bianco completo (... loading) immagine di sfondo opzionale
• aggiungere tramite CSS o Javascript (senza jQuery o jQm, perché deve essere eseguito prima di o viene analizzato)
• rimuovere splash sul pageshow dal corpo. Come sempre rimani sulla pagina caricata per prima (a meno che non usi rel="external", il body persiste, così puoi tranquillamente aggiungere la classe a tutte le tue pagine e verrà eseguito solo il coverup sulla prima pagina che l'utente carica.

Nasconde la schermata di avvio impostata quando JQM è terminato, quindi non avrai uno schermo bianco.Inoltre funziona cross-browser (vs immagine di avvio iOS) e può essere facilmente utilizzato con diverse dimensioni di immagine (prova la 2a applicazione con dispositivi diversi & portait/paesaggio).

Se si vuole un esempio di codice completo, me lo faccia sapere.

Answer 2

Penso informazioni qui po 'di più ..

• sono la parte di carico e pagine di destinazione dello stesso progetto?

• puoi fare in modo che non ci sia un aggiornamento completo tra schermata di caricamento e pagina di destinazione?

altri suggerimenti:

• se sia il carico e lo schermo di atterraggio appartengono ad uno stesso progetto (dominio), provare a chiamare la pagina di destinazione utilizzando changepage (http://api.jquerymobile.com/jQuery.mobile.changePage/), dal caricamento. In questo modo, l'icona di caricamento dovrebbe persistere.

• puoi indicare una nuova pagina di destinazione e vedere se questa schermata bianca non viene visualizzata. Forse qualcosa di sbagliato in questa pagina di destinazione.

Answer 3

$(function(){ 
    setTimeout(hideSplash, 2000); 
}); 

$(function hideSplash() { 
    $.mobile.changePage("*Jquery Mobile Page here*", { 
     transition: "slidedown", 
     reverse: false, 
     changeHash: false 
    }); 
}); 

Aggiungere questo codice a qualsiasi file js interno o esterno.